From cfb67a1cb90ff2c6ff6773031b9c450aec227470 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 29 May 2020 04:51:20 +0800
Subject: [PATCH] Fixed image lazy loading.

---
 _includes/lozad.html           |   5 +++--
 _layouts/post.html             |  14 ++++++++++----
 assets/img/commons/loading.png | Bin 0 -> 99 bytes
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 assets/img/commons/loading.png

diff --git a/_includes/lozad.html b/_includes/lozad.html
index ae2717e..accfbfc 100644
--- a/_includes/lozad.html
+++ b/_includes/lozad.html
@@ -1,7 +1,8 @@
 <!-- image lazy load: https://github.com/ApoorvSaxena/lozad.js -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
+
 <script type="text/javascript">
-  const el = document.querySelectorAll('#post-wrapper img');
-  const observer = lozad(el);
+  const imgs = document.querySelectorAll('#post-wrapper img');
+  const observer = lozad(imgs);
   observer.observe();
 </script>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index d8031c8..261f549 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -64,13 +64,19 @@ layout: default
       </div> <!-- .post-meta -->
 
       <div class="post-content">
-
         {% if page.image %}
           <img src="{{ page.image }}">
         {% endif %}
-
-        {{ content }}
-
+        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+        {% if content contains '<img src=' %}
+          {% capture loading %}
+           {{ "/assets/img/commons/loading.png" | relative_url }}
+          {% endcapture %}
+          {% assign replacement = '<img src=' | append: loading | append: ' data-src=' %}
+          {{ content | replace: '<img src=', replacement }}
+        {% else %}
+          {{ content }}
+        {% endif %}
       </div>
 
       <div class="post-tail-wrapper text-muted">
diff --git a/assets/img/commons/loading.png b/assets/img/commons/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a171d17194fb8ce67222d6399e40b236287bc05
GIT binary patch
literal 99
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0P3?wHke>@jRF$egBxB}_rRkpW)6k|z{UoeBi
rvm0qZ4xgusV~EE2WC_;A4NMFSOb!f;LEhYxfieu9u6{1-oD!M<+f)^i

literal 0
HcmV?d00001