Added lazy loading for css bg images

lrotermund · Oct 21, 2024 · 88b1413 · 88b1413
1 parent 82f8289
commit 88b1413
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/assets/js/template-dom-scripts.js b/assets/js/template-dom-scripts.js
@@ -148,3 +148,23 @@
   });
 
 }());
+
+document.addEventListener("DOMContentLoaded", function() {
+  const lazyBackgrounds = document.querySelectorAll('.lazy-background');
+
+  const lazyLoadBackground = (entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const bg = entry.target.getAttribute('data-bg');
+        entry.target.style.backgroundImage = bg;
+        observer.unobserve(entry.target);
+      }
+    });
+  };
+
+  const observer = new IntersectionObserver(lazyLoadBackground);
+
+  lazyBackgrounds.forEach(background => {
+    observer.observe(background);
+  });
+});
diff --git a/layouts/index.html b/layouts/index.html
@@ -14,10 +14,17 @@ <h1>{{ .Title }}</h1>
         <div class="meta">
           {{$images := apply $p.Params.images "absURL" "."}} {{$postImage :=
           index $images 0}}
+          {{ if lt $i 3 }}
           <div
             class="photo"
             style="background-image: url({{ $postImage }})"
           ></div>
+          {{ else }}
+          <div
+            class="photo lazy-background"
+            data-bg="url({{ $postImage }})"
+          ></div>
+          {{ end }}
         </div>
         <div class="description">
           <h2>{{ $p.Title }}</h2>