chore(deps): use lazysizes to load images

Author: cotes2020

_data/assets/cross_origin.yml

@@ -49,8 +49,8 @@ magnific-popup:
   css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
   js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
 
-lozad:
-  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+lazysizes:
+  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
 
 clipboard:
   js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js

_data/assets/self_host.yml

@@ -38,8 +38,8 @@ magnific-popup:
   css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
   js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
 
-lozad:
-  js: /assets/lib/lozad-1.16.0/lozad.min.js
+lazysizes:
+  js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js
 
 clipboard:
   js: /assets/lib/clipboard-2.0.9/clipboard.min.js

_includes/js-selector.html

@@ -15,12 +15,11 @@
 {% if page.layout == 'post' or page.layout == 'page' %}
   <!-- image lazy-loading & popup & clipboard -->
   {% assign _urls = site.data.assets[origin].magnific-popup.js
-      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].lazysizes.js
       | append: ',' | append: site.data.assets[origin].clipboard.js
   %}
 
   {% include jsdelivr-combine.html urls=_urls %}
-
 {% endif %}
 
 {% if page.layout == 'home'

_includes/refactor-content.html

@@ -115,7 +115,14 @@
 
       {% endunless %}
 
-      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+      <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
+
+      {% if _left contains 'class=' %}
+        {% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
+      {% else %}
+        {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
+      {% endif %}
+
       {% assign _left = _left | replace: 'src=', 'data-src=' %}
 
     {% endif %}

_javascript/utils/img-extra.js

@@ -1,6 +1,5 @@
 /**
- Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
- and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+ Set up image popup stuff (https://github.com/dimsemenov/Magnific-Popup)
  */
 
 $(function () {
@@ -10,12 +9,6 @@ $(function () {
         return;
     }
 
-    /* lazy loading */
-
-    const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
-    const observer = lozad(imgList);
-    observer.observe();
-
     /* popup */
 
     $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each(

_sass/addon/commons.scss

@@ -183,22 +183,17 @@ i { /* fontawesome icons */
   }
 }
 
-@-webkit-keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
 img[data-src] {
   margin: 0.5rem 0;
 
-  &[data-loaded="true"] {
-    -webkit-animation: fade-in linear 0.5s;
-    animation: fade-in linear 0.5s;
+  &.lazyload,
+  &.lazyloading {
+    opacity: 0;
+  }
+
+  &.lazyloaded {
+    opacity: 1;
+    transition: opacity 0.5s;
   }
 
   &.left {

_sass/layout/post.scss

@@ -30,7 +30,7 @@ img.preview-img {
   margin: 0;
   border-radius: 6px;
 
-  &.bg[data-loaded="true"] {
+  &.bg {
     background: var(--preview-img-bg);
   }
 }