Lazy load the image of posts.

_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' %}

_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>