Add lazy loading for the hidden image

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index fca641ebbe94168cf055b31752f5d61d04acdf0f..25a96be9b27ef0298c58eb60cc90f11209cbe6f5 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -245,6 +245,7 @@ export class FileProcessor {
           previewImage.src = thumbnail !== undefined ? thumbnail.link : element.link;
           previewImage.alt = element.filename;
           previewImage.style.display = "none";
+          previewImage.loading = "lazy";
           previewImage.classList.add(this.classPrefix + "item__previewImage");
           filenameLink.append(previewImage);
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index f61abcdd883d589dc30675011fdafadffd85807e..072caadb947989ab0eede92cc4d743382999a69f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -212,6 +212,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                         previewImage.src = thumbnail !== undefined ? thumbnail.link : element.link;
                         previewImage.alt = element.filename;
                         previewImage.style.display = "none";
+                        previewImage.loading = "lazy";
                         previewImage.classList.add(this.classPrefix + "item__previewImage");
                         filenameLink.append(previewImage);
                         const filenameContainer = elementContainer.querySelector("." + this.classPrefix + "item__filename");