From e3b01636ac3c2a1d2eac87d9e6ebd23027ecf6ed Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 29 Sep 2023 05:07:03 +0800
Subject: [PATCH] refactor(core): optimize image loading

- JavaScript runs so fast that LQIP will never be detected
- Increase the running priority of image processing in posts

Enhancement for #1267
---
 _includes/refactor-content.html               |  4 +-
 _javascript/modules/components/img-loading.js | 70 +++++++++++++------
 _javascript/post.js                           |  2 +-
 _sass/addon/commons.scss                      |  4 +-
 4 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index b035ef7..36352b0 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -81,6 +81,7 @@
     {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
     {% assign _attrs = _left | split: '" ' %}
 
+    {% assign _src = null %}
     {% assign _lqip = null %}
     {% assign _class = null %}
 
@@ -119,8 +120,9 @@
     {% endunless %}
 
     {% if _lqip %}
-      {% if _lqip contains ':' %}
+      {% if _lqip contains 'data:' %}
         {% assign _lazyload = false %}
+        {% assign _class = _class | append: ' blur' %}
       {% else %}
         {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
         {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
index 18ed3ac..07288a8 100644
--- a/_javascript/modules/components/img-loading.js
+++ b/_javascript/modules/components/img-loading.js
@@ -2,30 +2,60 @@
  * Setting up image lazy loading and LQIP switching
  */
 
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+const C_SHIMMER = 'shimmer';
+const C_BLUR = 'blur';
+
+function handleImage() {
+  const $img = $(this);
+
+  if (this.hasAttribute(ATTR_DATA_LQIP) && this.complete) {
+    $img.parent().removeClass(C_BLUR);
+  } else {
+    $img.parent().removeClass(C_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));
+  }
+}
+
 export function loadImg() {
-  const $images = $('main img[loading="lazy"]');
-  const $lqip = $('main img[data-lqip="true"]');
+  const $images = $('article img');
 
-  if ($images.length > 0) {
-    $images.on('load', function () {
-      /* Stop shimmer when image loaded */
-      $(this).parent().removeClass('shimmer');
-    });
+  if ($images.length) {
+    $images.on('load', handleImage);
+  }
 
-    $images.each(function () {
-      /* Images loaded from the browser cache do not trigger the 'load' event */
-      if ($(this).prop('complete')) {
-        $(this).parent().removeClass('shimmer');
+  /* 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);
+    }
+  });
+
+  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);
       }
     });
   }
-
-  if ($lqip.length > 0) {
-    $lqip.each(function () {
-      /* Switch LQIP with real image url */
-      const dataSrc = $(this).attr('data-src');
-      $(this).attr('src', encodeURI(dataSrc));
-      $(this).removeAttr('data-src data-lqip');
-    });
-  }
 }
diff --git a/_javascript/post.js b/_javascript/post.js
index dc6e28c..86ea32b 100644
--- a/_javascript/post.js
+++ b/_javascript/post.js
@@ -7,7 +7,6 @@ import {
   toc
 } from './modules/plugins';
 
-basic();
 initSidebar();
 initTopbar();
 loadImg();
@@ -15,3 +14,4 @@ imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
+basic();
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 812d7d5..c80d412 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -71,9 +71,9 @@ a {
 img {
   max-width: 100%;
   height: auto;
-  transition: all 0.7s ease-in-out;
+  transition: all 0.35s ease-in-out;
 
-  &[data-lqip='true'] {
+  .blur & {
     $blur: 20px;
 
     -webkit-filter: blur($blur);