refactor: optimize LQIP loading

- add blur effect for external WebP format LQIP
- remove the timeout delay

Author: cotes2020

_includes/refactor-content.html

@@ -120,13 +120,13 @@
     {% endunless %}
 
     {% if _lqip %}
-      {% if _lqip contains 'data:' %}
-        {% assign _lazyload = false %}
-        {% assign _class = _class | append: ' blur' %}
-      {% else %}
+      {% assign _lazyload = false %}
+      {% assign _class = _class | append: ' blur' %}
+
+      {% unless _lqip contains 'data:' %}
         {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
         {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
-      {% endif %}
+      {% endunless %}
 
       <!-- add image placeholder -->
       {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}

_javascript/modules/components/img-loading.js

@@ -4,27 +4,37 @@
 
 const ATTR_DATA_SRC = 'data-src';
 const ATTR_DATA_LQIP = 'data-lqip';
-const C_SHIMMER = 'shimmer';
-const C_BLUR = 'blur';
+
+const cover = {
+  SHIMMER: 'shimmer',
+  BLUR: 'blur'
+};
+
+function removeCover(clzss) {
+  $(this).parent().removeClass(clzss);
+}
 
 function handleImage() {
-  const $img = $(this);
+  if (!this.complete) {
+    return;
+  }
 
-  if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) {
-    $img.parent().removeClass(C_BLUR);
+  if (this.hasAttribute(ATTR_DATA_LQIP)) {
+    removeCover.call(this, cover.BLUR);
   } else {
-    $img.parent().removeClass(C_SHIMMER);
+    removeCover.call(this, cover.SHIMMER);
   }
 }
 
-/* Switch LQIP with real image url */
-function switchLQIP(img) {
-  // Sometimes loaded from cache without 'data-src'
-  if (img.hasAttribute(ATTR_DATA_SRC)) {
-    const $img = $(img);
-    const dataSrc = $img.attr(ATTR_DATA_SRC);
-    $img.attr('src', encodeURI(dataSrc));
-  }
+/**
+ * Switches the LQIP with the real image URL.
+ */
+function switchLQIP() {
+  const $img = $(this);
+  const src = $img.attr(ATTR_DATA_SRC);
+
+  $img.attr('src', encodeURI(src));
+  $img.removeAttr(ATTR_DATA_SRC);
 }
 
 export function loadImg() {
@@ -34,28 +44,18 @@ export function loadImg() {
     $images.on('load', handleImage);
   }
 
-  /* Images loaded from the browser cache do not trigger the 'load' event */
+  // Images loaded from the browser cache do not trigger the 'load' event
   $('article img[loading="lazy"]').each(function () {
     if (this.complete) {
-      $(this).parent().removeClass(C_SHIMMER);
+      removeCover.call(this, cover.SHIMMER);
     }
   });
 
+  // LQIPs set by the data URI or WebP will not trigger the 'load' event,
+  // so manually convert the URI to the URL of a high-resolution image.
   const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
 
   if ($lqips.length) {
-    const isHome = $('#post-list').length > 0;
-
-    $lqips.each(function () {
-      if (isHome) {
-        // JavaScript runs so fast that LQIPs in home page will never be detected
-        // Delay 50ms to ensure LQIPs visibility
-        setTimeout(() => {
-          switchLQIP(this);
-        }, 50);
-      } else {
-        switchLQIP(this);
-      }
-    });
+    $lqips.each(switchLQIP);
   }
 }