add lazy background image

web/app/themes/badegg/app/setup.php

@@ -168,5 +168,6 @@ function cors() {
 }
 
 $image_srcset = new Utilities\ImageSrcset;
-$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1000]);
+$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
 add_image_size('lazy', 50, 50);
+add_image_size('hero', 1920, 1080, true);

web/app/themes/badegg/resources/js/lib/Lazy.js

@@ -1,6 +1,7 @@
 export default function LazyLoadInit()
 {
   document.addEventListener('DOMContentLoaded', LazyLoad());
+  document.addEventListener('DOMContentLoaded', LazyBG());
 }
 
 function LazyLoad() {
@@ -31,3 +32,28 @@ function LazyLoad() {
     // 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
+  }
+}