Add preloading mechanism

markusweigelt · Dec 8, 2023 · a7aeb11 · a7aeb11
1 parent f3f86dd
commit a7aeb11
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3408,7 +3408,6 @@ Column content
 }
 
 .ui-tooltip.mediaListImageTooltip > .ui-tooltip-text > img {
-    max-width: 30vw;
     max-height: 40vh;
 }
 

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
@@ -394,6 +394,29 @@ metadataEditor.gallery = {
             this.updateDiscontinuousSecletionState();
         },
 
+        /**
+         * Preload the images in tooltip.
+         *
+         * To improve performance, the images within the tooltips are loaded only when the tooltip is displayed.
+         * For the preview image, it makes no difference, as the image is already loaded. However, if the image
+         * from the MediaView is to be displayed in the tooltip, it must be preloaded. Otherwise, the tooltip appears
+         * at a shifted position because, at the time of display, it does not yet know the size of its content.
+         */
+        preloadTooltipImage(tooltip) {
+            let tooltipElement = document.getElementById(tooltip.id);
+            if (!tooltipElement.hasAttribute("data-preloaded")) {
+                let tempImage = new Image();
+                tempImage.src = tooltipElement.getElementsByTagName('img')[0].src;
+                tempImage.onload = function () {
+                    tooltipElement.setAttribute("data-preloaded", "true");
+                    tooltipElement.getElementsByTagName('img')[0].height = tempImage.height;
+                    PF(tooltip.cfg.widgetVar).show();
+                }
+                return false;
+            }
+            return true;
+        },
+
         /**
          * Checks whether selection is a continuous selection and applies corresponding CSS style class.
          */

diff --git a/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-overlay.xhtml b/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-overlay.xhtml
@@ -15,7 +15,8 @@
         xmlns:p="http://primefaces.org/ui"
         xmlns:f="http://xmlns.jcp.org/jsf/core"
         xmlns:h="http://xmlns.jcp.org/jsf/html"
-        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+        xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
 
     <ui:param name="isPreviewTooltip"
               value="#{DataEditorForm.galleryPanel.isPreviewTooltip() and (
@@ -43,9 +44,11 @@
             </h:panelGroup>
         </p:outputPanel>
 
-        <p:tooltip for="mediaListImageTooltipTrigger" styleClass="mediaListImageTooltip">
+        <p:tooltip for="mediaListImageTooltipTrigger" styleClass="mediaListImageTooltip"
+                   beforeShow="metadataEditor.gallery.pages.preloadTooltipImage(this)">
             <p:graphicImage rendered="#{DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
-                            value="#{mediaProvider.mediaView}">
+                            value="#{mediaProvider.mediaView}"
+                            a:loading="lazy">
                 <f:param name="mediaId"
                          value="#{media.id}"/>
                 <f:param name="process"
@@ -55,7 +58,8 @@
             </p:graphicImage>
 
             <p:graphicImage rendered="#{not DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
-                            value="#{mediaProvider.previewData}">
+                            value="#{mediaProvider.previewData}"
+                            a:loading="lazy">
                 <f:param name="mediaId"
                          value="#{media.id}"/>
                 <f:param name="process"