From f932cf0d00db093d6d1055e4f4e711e5f544a376 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 20 Sep 2020 17:58:52 +0800
Subject: [PATCH] Lazy load the feature image.

---
 _layouts/post.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index ffef163..94ea43a 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -62,13 +62,18 @@ layout: default
 
       <div class="post-content">
 
+        {%- capture img_placehodler -%}
+          data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
+        {% endcapture%}
+
         {% if page.image %}
-        <img src="{{ page.image }}" class="post-preview-img">
+          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
         {% endif %}
 
         <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}
+          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
+          {{ content | replace: '<img src=', replacement }}
         {% else %}
           {{ content }}
         {% endif %}