From e561dfb9be3534ebeb2aec1d9f864953e2763ab2 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 29 Apr 2020 02:54:18 +0800
Subject: [PATCH] Simplified the lazy loading of post images.

---
 _includes/lozad.html           |   6 +++---
 _layouts/post.html             |  16 +++++-----------
 assets/css/post.scss           |  22 +++++++++++-----------
 assets/img/commons/loading.png | Bin 99 -> 0 bytes
 4 files changed, 19 insertions(+), 25 deletions(-)
 delete mode 100644 assets/img/commons/loading.png

diff --git a/_includes/lozad.html b/_includes/lozad.html
index 179deb8..ae2717e 100644
--- a/_includes/lozad.html
+++ b/_includes/lozad.html
@@ -1,7 +1,7 @@
-<!-- image lazy load -->
+<!-- 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 observer = lozad();
+  const el = document.querySelectorAll('#post-wrapper img');
+  const observer = lozad(el);
   observer.observe();
 </script>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index b84cd6c..d8031c8 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -64,19 +64,13 @@ layout: default
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
         {% if page.image %}
-        <img src="{{ page.image }}">
-        {% endif %}
-        <!-- 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 class="lozad" src=' | append: loading | append: ' data-src=' %}
-          {{ content | replace: '<img src=', replacement }}
-        {% else %}
-          {{ content }}
+          <img src="{{ page.image }}">
         {% endif %}
+
+        {{ content }}
+
       </div>
 
       <div class="post-tail-wrapper text-muted">
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 53bf54c..447fdc5 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -31,17 +31,17 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   @include semi-bold;
 }
 
-.post img {
-  margin-top: .5rem;
-  margin-bottom: 1.5rem;
-  max-width: 100%;
-  height: auto;
-  // filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
-  position: relative;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+.post {
+  img {
+    max-width: 100%;
+    margin-top: .5rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
 }
 
 .post-tail-wrapper {
diff --git a/assets/img/commons/loading.png b/assets/img/commons/loading.png
deleted file mode 100644
index 7a171d17194fb8ce67222d6399e40b236287bc05..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

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