BackgroundImage component: support specific image sizes and lazy loading

resources/js/lib/Lazy.js

@@ -1,59 +1,54 @@
 export default function LazyLoadInit()
 {
   document.addEventListener('DOMContentLoaded', LazyLoad());
-  document.addEventListener('DOMContentLoaded', LazyBG());
 }
 
 function LazyLoad() {
 
-  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
+  const lazyElements = [].slice.call(
+    document.querySelectorAll('img.lazy, .lazy-bg')
+  );
 
   if ('IntersectionObserver' in window) {
-    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          let lazyImage = entry.target;
-          lazyImage.src = lazyImage.dataset.src;
+    const lazyObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
 
-          if(lazyImage.dataset.srcset) {
-            lazyImage.srcset = lazyImage.dataset.srcset;
+        const el = entry.target;
+
+        // Handle <img>
+        if (el.tagName === 'IMG') {
+          el.src = el.dataset.src;
+
+          if (el.dataset.srcset) {
+            el.srcset = el.dataset.srcset;
           }
 
-          lazyImage.classList.remove('lazy');
-          lazyImageObserver.unobserve(lazyImage);
+          el.classList.remove('lazy');
         }
+
+        // Handle background images
+        else {
+          if (el.dataset.bg) {
+            el.style.backgroundImage = `url("${el.dataset.bg}")`;
+            el.classList.remove('lazy-bg');
+            el.classList.add('lazy-loaded');
+          }
+        }
+
+        observer.unobserve(el);
       });
     });
 
-    lazyImages.forEach(function(lazyImage) {
-      lazyImageObserver.observe(lazyImage);
-    });
+    lazyElements.forEach(el => lazyObserver.observe(el));
   } else {
-    // Possibly fall back to a more compatible method here
-  }
-}
-
-function LazyBG() {
-
-  var lazyImages = [].slice.call(document.querySelectorAll('.lazy-bg'));
-
-  if ('IntersectionObserver' in window) {
-    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          let lazyImage = entry.target;
-          lazyImage.computedStyleMap.backgroundImage = `url(${lazyImage.dataset.bg})`;
-
-          lazyImage.classList.remove('lazy-bg');
-          lazyImageObserver.unobserve(lazyImage);
-        }
-      });
-    });
-
-    lazyImages.forEach(function(lazyImage) {
-      lazyImageObserver.observe(lazyImage);
-    });
-  } else {
-    // Possibly fall back to a more compatible method here
+    // Optional fallback: load everything immediately
+    lazyElements.forEach(el => {
+      if (el.tagName === 'IMG' && el.dataset.src) {
+        el.src = el.dataset.src;
+      } else if (el.dataset.bg) {
+        el.style.backgroundImage = `url("${el.dataset.bg}")`;
+      }
+    });
   }
 }