[TASK] progressive loaded images

Packages/chrosey_materialize/css/style.css

@@ -17,6 +17,64 @@ main {
     flex: 1 0 auto;
 }
 
+.progressive {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    outline: none
+}
+
+.progressive img {
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: auto;
+    border: 0
+}
+
+.progressive img.preview {
+    filter: blur(2vw);
+    transform: scale(1.05)
+}
+
+.progressive img.reveal {
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform, opacity;
+    animation: progressiveReveal 1s ease-out
+}
+
+@keyframes progressiveReveal {
+    0% {
+        transform: scale(1.05);
+        filter: blur(20px);
+        opacity: 0
+    }
+
+    to {
+        transform: scale(1);
+        filter: none;
+        opacity: 1
+    }
+}
+
+picture {
+    width: 100%;
+    /* stretch to fit its containing element */
+    overflow: hidden;
+}
+
+picture img {
+    width: 100%;
+    /* stretch to fill the picture element */
+    transition: filter .5s;
+}
+
+picture.lazy img {
+    filter: blur(20px);
+}
+
 /*
 header,
 main,

Packages/chrosey_materialize/js/site.js

@@ -1,37 +1,50 @@
 M.AutoInit();
 
-// Set up an intersection observer with some options
-var observer = new IntersectionObserver(lazyLoad, {
+window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName && window.addEventListener('load', function () {
+    'use strict';
+    var e, t, n = document.getElementsByClassName('progressive replace');
 
-    // where in relation to the edge of the viewport, we are observing
-    rootMargin: "100px",
+    function i() {
+        t = t || setTimeout(function () {
+            t = null, r()
+        }, 300)
+    }
 
-    // how much of the element needs to have intersected 
-    // in order to fire our loading function
-    threshold: 1.0
+    function r() {
+        n.length && requestAnimationFrame(function () {
+            for (var t, i, r = window.innerHeight, a = 0; a < n.length;) 0 < (i = (t = n[a].getBoundingClientRect()).top) + t.height && r > i ? (s(n[a]), n[a].classList.remove('replace')) : a++;
+            e = n.length
+        })
+    }
 
-});
-
-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
-}
+    function s(e, t) {
+        var n = e && (e.getAttribute('data-href') || e.href);
+        if (n) {
+            var i = new Image,
+                r = e.dataset;
+            r && (r.srcset && (i.srcset = r.srcset), r.sizes && (i.sizes = r.sizes)), i.onload = function () {
+                requestAnimationFrame(function () {
+                    n === e.href && (e.style.cursor = 'default', e.addEventListener('click', function (e) {
+                        e.preventDefault()
+                    }, !1));
+                    var t = e.querySelector && e.querySelector('img.preview');
+                    e.insertBefore(i, t && t.nextSibling).addEventListener('animationend', function () {
+                        t && (t.alt && (i.alt = t.alt), e.removeChild(t)), i.classList.remove('reveal')
+                    })
+                })
+            }, (t = 1 + (t || 0)) < 3 && (i.onerror = function () {
+                setTimeout(function () {
+                    s(e, t)
+                }, 3e3 * t)
+            }), i.className = 'reveal', i.src = n
+        }
+    }
+    window.addEventListener('scroll', i, !1), window.addEventListener('resize', i, !1), MutationObserver && new MutationObserver(function () {
+        n.length !== e && r()
+    }).observe(document.body, {
+        subtree: !0,
+        childList: !0,
+        attributes: !0,
+        characterData: !0
+    }), r()
+}, !1);

Packages/chrosey_materialize/partials/images.twig

@@ -1,3 +1,5 @@
+{% import "partials/macros.twig" as macros %}
+
 {% block images %}
 <div class="container">
     {% if images | length > 1 %}
@@ -5,19 +7,13 @@
         {% for image in images %}
         <a href="{{ image.url }}"
            class="carousel-item">
-            <img class="lazy"
-                 loading="lazy"
-                 data-src="{{ image.url }}"
-                 alt="{{ image.alt }}">
+            {{ macros.variants(image) }}
         </a>
         {% endfor %}
     </div>
     {% else %}
-    <img data-src="{{ images.0.url }}"
-         alt="{{ images.0.alt }}"
-         class="materialboxed depth-1 lazy"
-         loading="lazy"
-         {{ images.0.size }}>
+    {{ macros.variants(images.0, "materialboxed" ) }}
     {% endif %}
 </div>
+
 {% endblock %}

Packages/chrosey_materialize/partials/macros.twig

@@ -0,0 +1,8 @@
+{% macro variants(image,class="") %}
+<div data-href="{{image.url}}"
+     class="progressive replace {{class}}">
+  <img src="{{ image.mypath }}/thumbs/{{ image.basename }}"
+       alt="{{ image.alt}}"
+       class="preview">
+</div>
+{% endmacro %}