Merge branch 'lazy-load-bug-fix'

TomNCatz · Sep 4, 2023 · 8342e11 · 8342e11
2 parents 66c0e10 + 4c4b5cf
commit 8342e11
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 31 deletions.
diff --git a/src/block.ts b/src/block.ts
@@ -7,7 +7,7 @@ import
     EXTENSIONS, GALLERY_DISPLAY_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO,
     VIDEO_REGEX,
     getImageResources,
-    getImgInfo, updateFocus, splitcolumns
+    getImgInfo, updateFocus, splitcolumns, setLazyLoading
   } from './utils'
 import { GalleryInfoView } from './view'
 import type GalleryPlugin from './main'
@@ -68,15 +68,19 @@ export class GalleryProcessor
     if (args.type === 'grid')
     {
       const [columns, columnWidth] = splitcolumns(imgList, elCanvas, args.imgWidth)
+      let tempImg = plugin.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif")
 
       new ImageGrid({
         props: {
           columns: columns,
-          maxColumnWidth: columnWidth
+          maxColumnWidth: columnWidth,
+          tempImg: tempImg
         },
         target: elCanvas
       })
 
+      setLazyLoading();
+
       const imageFocusEl = elCanvas.createDiv({ cls: 'ob-gallery-image-focus' })
       const focusElContainer = imageFocusEl.createDiv({ attr: { class: 'focus-element-container' } });
       const focusImage = focusElContainer.createEl('img', { attr: { style: 'display: none;' } });

diff --git a/src/utils.ts b/src/utils.ts
@@ -268,6 +268,35 @@ export const splitcolumns = (imgList: string[], target: HTMLElement, maxWidth: n
   return [columns, (target.innerWidth-15)/columnCount];
 }
 
+
+export const setLazyLoading = () =>
+{
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+  let options = {
+    root: document.querySelector("ob-gallery-display"),
+    // rootMargin: "0px",
+    // threshold: 1.0,
+  };
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target as HTMLImageElement;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.classList.remove("lazy");
+          observer.unobserve(lazyImage);
+        }
+      });
+    }, options);
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+}
+
 /**
  * assesses if file matches the tag patterns passed
  * @param file - the image file to assess

diff --git a/src/view.ts b/src/view.ts
@@ -3,7 +3,7 @@ import type { ImageResources } from './utils'
 import
   {
     OB_GALLERY, OB_GALLERY_INFO, GALLERY_RESOURCES_MISSING, VIDEO_REGEX,
-    gallerySearchIcon, getImageResources, getImgInfo, updateFocus, splitcolumns
+    gallerySearchIcon, getImageResources, getImgInfo, updateFocus, splitcolumns, setLazyLoading
   } from './utils'
 import * as CodeMirror from 'codemirror'
 import ImageGrid from './svelte/ImageGrid.svelte'
@@ -73,6 +73,7 @@ export class GalleryView extends ItemView
 
     // Create gallery display Element
     this.displayEl = this.viewEl.createDiv({ cls: 'ob-gallery-display' })
+    this.imagesContainer = this.displayEl.createEl('ul')
 
     this.imageFocusEl = this.displayEl.createDiv({ cls: 'ob-gallery-image-focus', attr: { style: 'display: none;' } })
     const focusElContainer = this.imageFocusEl.createDiv({ attr: { class: 'focus-element-container' } })
@@ -170,7 +171,7 @@ export class GalleryView extends ItemView
 
   async updateDisplay(path: string, name: string, tag: string, exclusive: boolean, reverse : boolean, plugin: GalleryTagsPlugin)
   {
-    this.displayEl.empty()
+    this.imagesContainer.empty()
 
     {
       const totalFiles = this.app.vault.getFiles();
@@ -190,41 +191,18 @@ export class GalleryView extends ItemView
       }
     }
 
-    const [columns, columnWidth] = splitcolumns(this.imgList, this.displayEl, plugin.settings.width)
+    const [columns, columnWidth] = splitcolumns(this.imgList, this.imagesContainer, plugin.settings.width)
     let tempImg = this.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif")
     new ImageGrid({
       props: {
         columns: columns,
         maxColumnWidth: columnWidth, 
         tempImg: tempImg
       },
-      target: this.displayEl
+      target: this.imagesContainer
     })
-
-    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
-    let options = {
-      root: document.querySelector("ob-gallery-display"),
-      // rootMargin: "0px",
-      // threshold: 1.0,
-    };
-    if ("IntersectionObserver" in window) {
-      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-        entries.forEach(function(entry) {
-          if (entry.isIntersecting) {
-            let lazyImage = entry.target as HTMLImageElement;
-            lazyImage.src = lazyImage.dataset.src;
-            lazyImage.classList.remove("lazy");
-            observer.unobserve(lazyImage);
-          }
-        });
-      }, options);
-
-      lazyImages.forEach(function(lazyImage) {
-        lazyImageObserver.observe(lazyImage);
-      });
-    } else {
-      // Possibly fall back to event handlers here
-    }
+
+    setLazyLoading();
   }
 
   getViewType(): string