[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
+}

Packages/chrosey_materialize/partials/images.twig

@@ -5,15 +5,18 @@
         {% for image in images %}
         <a href="{{ image.url }}"
            class="carousel-item">
-            <img src="{{ image.url }}"
+            <img class="lazy"
+                 loading="lazy"
+                 data-src="{{ image.url }}"
                  alt="{{ image.alt }}">
         </a>
         {% endfor %}
     </div>
     {% else %}
-    <img src="{{ images.0.url }}"
+    <img data-src="{{ images.0.url }}"
          alt="{{ images.0.alt }}"
-         class="materialboxed depth-1"
+         class="materialboxed depth-1 lazy"
+         loading="lazy"
          {{ images.0.size }}>
     {% endif %}
 </div>

Packages/chrosey_materialize/templates/blog.twig

@@ -9,8 +9,10 @@
       <div class="col s12 m3">
             <div class="card hoverable">
                   <div class="card-image">
-                        <img src="{{ images.0.url }}"
+                        <img data-src="{{ images.0.url }}"
-                             alt="{{ images.0.alt }}">
+                             alt="{{ images.0.alt }}"
+                             loading="lazy"
+                             class="lazy">
                         <a href="{{ page.url }}"
                            class="btn-floating halfway-fab waves-effect waves-light deep-orange"><i
                                  class="material-icons">chevron_right</i></a>

Packages/chrosey_materialize/templates/layout/navigationBar.twig

@@ -4,8 +4,9 @@
       <a id="logo-container"
          href="{{ "index"|link }}"
          class="brand-logo">
-         <img class="center"
+         <img class="lazy"
-              src="{{ assets_url }}/logo.svg "
+              loading="lazy"
+              data-src="{{ assets_url }}/logo.svg "
               alt=""
               height="64"
               width="64" />