Merge pull request #5114 from thomaslow/performance-metadataeditor-la…

…zy-load-gallery-thumbnails Performance MetaDataEditor Lazy Loading of Gallery Thumbnails
kitodo · May 13, 2022 · d87f480 · d87f480
2 parents 64b39a0 + 32d21d6
commit d87f480
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
@@ -128,7 +128,8 @@
                                                     a:data-order="#{media.order}"
                                                     a:data-stripe="#{DataEditorForm.galleryPanel.stripes.indexOf(stripe)}">
                                             <p:graphicImage value="#{DataEditorForm.galleryPanel.previewData}"
-                                                            rendered="#{media.showingInPreview}">
+                                                            rendered="#{media.showingInPreview}"
+                                                            a:loading="lazy">
                                                 <f:param name="mediaId"
                                                         value="#{media.id}" />
                                                 <f:param name="process"
@@ -182,7 +183,8 @@
                                                            a:data-stripe="0">
                                                     <!-- only render those pages that are not assigned to a stripe (structure) here! -->
                                                     <p:graphicImage value="#{DataEditorForm.galleryPanel.previewData}"
-                                                                    rendered="#{media.showingInPreview}">
+                                                                    rendered="#{media.showingInPreview}"
+                                                                    a:loading="lazy">
                                                         <f:param name="mediaId"
                                                                  value="#{media.id}"/>
                                                         <f:param name="process"
@@ -221,7 +223,8 @@
                             <p:panel a:data-order="#{media.order}">
                                 <h:panelGroup layout="block" styleClass="thumbnail-container">
                                         <p:graphicImage value="#{DataEditorForm.galleryPanel.previewData}"
-                                                        rendered="#{media.showingInPreview}">
+                                                        rendered="#{media.showingInPreview}"
+                                                        a:loading="lazy">
                                             <f:param name="id"
                                                      value="#{media.id}"/>
                                             <f:param name="process"
@@ -261,7 +264,8 @@
                                                            styleClass="thumbnail-container"
                                                            a:data-order="#{media.order}">
                                                 <h:outputText><p:graphicImage value="#{DataEditorForm.galleryPanel.previewData}"
-                                                                              rendered="#{media.showingInPreview}">
+                                                                              rendered="#{media.showingInPreview}"
+                                                                              a:loading="lazy">
                                                     <f:param name="mediaId"
                                                              value="#{media.id}" />
                                                     <f:param name="process"