From 9e67a9dc22ee042cecffa0ab40f11c09b8a49669 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 24 Nov 2019 17:38:41 +0800
Subject: [PATCH] Lazy load the image of posts.

---
 _includes/head.html |  2 ++
 _layouts/post.html  | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/_includes/head.html b/_includes/head.html
index 7aeda16..b5609c1 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -64,6 +64,8 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
     integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script>
 
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
+
   <script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script>
 
   {% if jekyll.environment == 'production' %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 8cd19d7..e1f9ea9 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -42,12 +42,21 @@ layout: default
         {% endif %}
       </div> <!-- .post-meta -->
 
+      {% capture post_content %}
       <div class="post-content">
         {% if page.image %}
         <img src="{{ page.image }}" class="img-rounded">
         {% endif %}
         {{ content }}
-      </div><!-- .post-content -->
+      </div>
+      {% endcapture %}
+
+      <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+      {% if post_content contains '<img src=' %}
+        {{ post_content | replace: '<img src=', '<img class="lozad" data-src=' }}
+      {% else %}
+        {{ post_content }}
+      {% endif %}
 
       <div class="post-tail text-muted">
         <!-- Tags -->
@@ -97,3 +106,9 @@ layout: default
 </div> <!-- div.col-12..col-lg-11.col-xl-8 -->
 
 {% include panel.html %}
+
+<!-- image lazy load -->
+<script type="text/javascript">
+  const observer = lozad();
+  observer.observe();
+</script>