Previews lazy loading

bookmarks/frontend/behaviors/image-lazy-loading.js

@@ -0,0 +1,36 @@
+import { Behavior, registerBehavior } from "./index";
+
+class ImageLazyLoading extends Behavior {
+  constructor(element) {
+    super(element);
+
+    const src = element.getAttribute("ld-img-lazy-load");
+    if (!src) {
+      return;
+    }
+
+    if (!window.IntersectionObserver) {
+      element.loading = "lazy";
+      element.src = src;
+      return;
+    }
+
+    // Prefer IntersectionObserver over loading=lazy
+    // because Safari still loads images when loading=lazy
+    let observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          element.src = src;
+          observer.disconnect();
+          observer = null;
+        }
+      },
+      {
+        rootMargin: "0px 0px 100% 0px",
+      }
+    );
+    observer.observe(element);
+  }
+}
+
+registerBehavior("ld-img-lazy-load", ImageLazyLoading);

bookmarks/frontend/index.js

@@ -6,6 +6,7 @@ import "./behaviors/fetch";
 import "./behaviors/form";
 import "./behaviors/modal";
 import "./behaviors/global-shortcuts";
+import "./behaviors/image-lazy-loading";
 import "./behaviors/tag-autocomplete";
 export { default as TagAutoComplete } from "./components/TagAutocomplete.svelte";
 export { default as SearchAutoComplete } from "./components/SearchAutoComplete.svelte";

bookmarks/templates/bookmarks/bookmark_list.html

@@ -145,7 +145,7 @@
           </div>
         </div>
         {% if bookmark_list.show_preview_images and bookmark_item.preview_image_file %}
-          <img class="preview-image" src="{% static bookmark_item.preview_image_file %}"/>
+          <img class="preview-image" ld-img-lazy-load="{% static bookmark_item.preview_image_file %}"/>
         {% endif %}
       </li>
     {% endfor %}

bookmarks/tests/test_bookmarks_list_template.py

@@ -182,7 +182,7 @@ def assertPreviewImage(self, html: str, bookmark: Bookmark, visible=True):
 
         url = f"/static/{bookmark.preview_image_file}"
         self.assertIsNotNone(preview_image)
-        self.assertEqual(preview_image["src"], url)
+        self.assertEqual(preview_image["ld-img-lazy-load"], url)
 
     def assertBookmarkURLCount(
         self, html: str, bookmark: Bookmark, link_target: str = "_blank", count=0