From 2bc317244431acbb6b80a09a3848983ff5656b6a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 4 Oct 2023 18:07:10 +0800
Subject: [PATCH] refactor: optimize LQIP loading

- add blur effect for external WebP format LQIP
- remove the timeout delay
---
 _includes/refactor-content.html               | 10 ++--
 _javascript/modules/components/img-loading.js | 58 +++++++++----------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 36352b0..9d4e679 100644
--- a/_includes/refactor-content.html
+++ b/_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=' %}
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
index 07288a8..c9b7b7f 100644
--- a/_javascript/modules/components/img-loading.js
+++ b/_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);
   }
 }