[TASK] starting lazy-load

Packages/chrosey_materialize/js/site.js

@@ -1 +1,37 @@
-M.AutoInit();
+M.AutoInit();
+
+// Set up an intersection observer with some options
+var observer = new IntersectionObserver(lazyLoad, {
+
+    // where in relation to the edge of the viewport, we are observing
+    rootMargin: "100px",
+
+    // how much of the element needs to have intersected 
+    // in order to fire our loading function
+    threshold: 1.0
+
+});
+
+function lazyLoad(elements) {
+    elements.forEach(image => {
+        if (image.intersectionRatio > 0) {
+
+            // set the src attribute to trigger a load
+            image.src = image.dataset.src;
+
+            // stop observing this element. Our work here is done!
+            observer.unobserve(item.target);
+        };
+    });
+};
+
+// If the browser supports lazy loading, we can safely assign the src
+// attributes without instantly triggering an eager image load.
+if ("loading" in HTMLImageElement.prototype) {
+    const lazyImages = document.querySelectorAll("img.lazy");
+    lazyImages.forEach(img => {
+        img.src = img.dataset.src;
+    });
+} else {
+    // Use our own lazyLoading with Intersection Observers and all that jazz
+}