From c8b61dbd465ab3d288aa16eef4f9563c4c83860b Mon Sep 17 00:00:00 2001
From: Thomas Low <code@thomaslow.com>
Date: Thu, 28 Apr 2022 20:22:25 +0200
Subject: [PATCH 1/2] Lazy load thumbnails that are currently visible in
 gallery panel.

---
 .../WEB-INF/templates/includes/metadataEditor/gallery.xhtml | 6 ++++--
 1 file changed, 4 insertions(+), 2 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
index de3b45df375..91d84ae707a 100644
--- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
@@ -120,7 +120,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"
@@ -208,7 +209,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"

From 32d21d6d5a8656e7aef056610c280e8a56340626 Mon Sep 17 00:00:00 2001
From: Thomas Low <code@thomaslow.com>
Date: Wed, 4 May 2022 18:48:04 +0200
Subject: [PATCH 2/2] Add lazy attribute to thumbnail images in preview view
 and grid view as well. Without these changes chrome seems to freeze when the
 same image is dynamically changed from lazy to non-lazy when switching
 between gallery and preview view.

---
 .../WEB-INF/templates/includes/metadataEditor/gallery.xhtml | 6 ++++--
 1 file changed, 4 insertions(+), 2 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
index 91d84ae707a..3953d937459 100644
--- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
@@ -283,7 +283,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"
@@ -323,7 +324,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"