feat: 评论区视口懒加载 (#480)

_config.yml

@@ -207,6 +207,7 @@ search:
 comments:
   service: # beaudar, utterances, giscus, twikoo, waline, artalk
   comment_title: 快来参与讨论吧~
+  lazyload: false # true / false
   # beaudar
   # https://beaudar.lipk.org/
   beaudar:

layout/_partial/comments/artalk/script.ejs

@@ -1,14 +1,16 @@
-<script>
+<script type="module">
+  const el = document.getElementById('artalk_container');
+  util.viewportLazyload(el, load_artalk, <%= theme.comments.lazyload ?? false %>);
+
   function load_artalk() {
-    if (!document.querySelectorAll("#artalk_container")[0]) return;
+    if (!el) return;
     utils.css('<%- theme.comments.artalk.css %>');
     utils.js('<%- theme.comments.artalk.js %>', {defer: true}).then(function () {
-      const el = document.getElementById("artalk_container");
+      const path = el.getAttribute('comment_id');
-      var path = el.getAttribute('comment_id');
       if (!path) {
         path = decodeURI(window.location.pathname);
       }
-      var artalk = Artalk.init({
+      const artalk = Artalk.init({
         el: '#artalk_container',
         pageKey: path,
         pageTitle: '<%= page.title %>',
@@ -16,10 +18,7 @@
         placeholder: '<%= theme.comments.artalk.placeholder %>',
         site: "<%- config.title %>",
         darkMode: '<%= theme.comments.artalk.darkMode %>'
-        })
+      });
     });
   }
-  window.addEventListener('DOMContentLoaded', (event) => {
-    load_artalk();
-  });
 </script>

layout/_partial/comments/beaudar/script.ejs

@@ -1,26 +1,23 @@
-<script>
+<script type="module">
-  function loadBeaudar() {
+  const el = document.querySelector('#comments #beaudar');
-    const els = document.querySelectorAll("#comments #beaudar");
+  util.viewportLazyload(el, load_beaudar, <%= theme.comments.lazyload ?? false %>);
-    if (els.length === 0) return;
+
-    els.forEach((el, i) => {
+  function load_beaudar() {
+    if (!el) return;
     try {
       el.innerHTML = '';
     } catch (error) {
       console.error(error);
     }
-      var script = document.createElement('script');
+    const script = document.createElement('script');
     script.src = 'https://beaudar.lipk.org/client.js';
     script.async = true;
-      for (let key of Object.keys(el.attributes)) {
+    for (const key of Object.keys(el.attributes)) {
-        let attr = el.attributes[key];
+      const attr = el.attributes[key];
       if (['class', 'id'].includes(attr.name) === false) {
         script.setAttribute(attr.name, attr.value);
       }
     }
     el.appendChild(script);
-    });
   }
-  window.addEventListener('DOMContentLoaded', (event) => {
-      loadBeaudar();
-  });
 </script>

layout/_partial/comments/giscus/script.ejs

@@ -1,22 +1,22 @@
-<script>
+<script type="module">
-  window.addEventListener('DOMContentLoaded', (event) => {
+  const el = document.querySelector('#comments #giscus');
-    const els = document.querySelectorAll("#comments #giscus");
+  util.viewportLazyload(el, load_discus, <%= theme.comments.lazyload ?? false %>);
-    if (els.length === 0) return;
+
-    els.forEach((el, i) => {
+  function load_discus() {
+    if (!el) return;
     try {
         el.innerHTML = '';
       } catch (error) {
         console.error(error);
       }
-      var script = document.createElement('script');
+      const script = document.createElement('script');
       script.async = true;
-      for (let key of Object.keys(el.attributes)) {
+      for (const key of Object.keys(el.attributes)) {
-        let attr = el.attributes[key];
+        const attr = el.attributes[key];
         if (['class', 'id'].includes(attr.name) === false) {
           script.setAttribute(attr.name, attr.value);
         }
       }
       el.appendChild(script);
-    });
+  }
-  });
 </script>

layout/_partial/comments/twikoo/script.ejs

@@ -1,9 +1,11 @@
-<script>
+<script type="module">
+  const el = document.getElementById('artalk_container');
+  util.viewportLazyload(el, load_twikoo, <%= theme.comments.lazyload ?? false %>);
+
   function load_twikoo() {
-        if (!document.querySelectorAll("#twikoo_container")[0]) return;
+    if (!el) return;
     utils.js('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
-            const el = document.getElementById("twikoo_container");
+      const path = el.getAttribute('comment_id');
-            var path = el.getAttribute('comment_id');
       if (!path) {
         path = decodeURI(window.location.pathname);
       }
@@ -13,8 +15,4 @@
       }));
     });
   }
-
-    window.addEventListener('DOMContentLoaded', (event) => {
-        load_twikoo();
-    });
 </script>

layout/_partial/comments/utterances/script.ejs

@@ -1,26 +1,23 @@
-<script>
+<script type="module">
-  function loadUtterances() {
+  const el = document.querySelector("#comments #utterances");
-    const els = document.querySelectorAll("#comments #utterances");
+  util.viewportLazyload(el, load_utterances, <%= theme.comments.lazyload ?? false %>);
-    if (els.length === 0) return;
+
-    els.forEach((el, i) => {
+  function load_utterances() {
+    if (!el) return;
     try {
       el.innerHTML = '';
     } catch (error) {
       console.error(error);
     }
-      var script = document.createElement('script');
+    const script = document.createElement('script');
     script.src = 'https://utteranc.es/client.js';
     script.async = true;
-      for (let key of Object.keys(el.attributes)) {
+    for (const key of Object.keys(el.attributes)) {
-        let attr = el.attributes[key];
+      const attr = el.attributes[key];
       if (['class', 'id'].includes(attr.name) === false) {
         script.setAttribute(attr.name, attr.value);
       }
     }
     el.appendChild(script);
-    });
   }
-  window.addEventListener('DOMContentLoaded', (event) => {
-      loadUtterances();
-  });
 </script>

layout/_partial/comments/waline/script.ejs

@@ -1,14 +1,16 @@
 <script type="module">
-  import { init } from '<%- theme.comments.waline.js %>'
+  import { init } from '<%- theme.comments.waline.js %>';
 
-  function load_comment(){
+  const el = document.getElementById('waline_container');
-    if(!document.getElementById("waline_container"))return;
+  util.viewportLazyload(el, load_waline, <%= theme.comments.lazyload ?? false %>);
+
+  function load_waline(){
+    if (!el) return;
 
     utils.css('<%- theme.comments.waline.css %>');
     utils.css('<%- theme.comments.waline.meta_css %>');
 
-    const el = document.getElementById("waline_container");
+    const path = el.getAttribute('comment_id');
-    var path = el.getAttribute('comment_id');
     if (!path) {
       path = decodeURI(window.location.pathname);
     }
@@ -18,12 +20,12 @@
       path: path,
       <% if(!!theme.comments.waline.imageUploader?.api){ %>
         imageUploader: function(file) {
-          let headers = new Headers();
+          const headers = new Headers();
           headers.set('Accept', 'application/json');
           <% if(!!theme.comments.waline.imageUploader?.token) { %>
             headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
           <% } %>
-          let formData = new FormData();
+          const formData = new FormData();
           formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
           return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
             method: 'POST',
@@ -34,10 +36,5 @@
         },
       <% } %>
     }));
-
   }
-  window.addEventListener('DOMContentLoaded', (event) => {
-    load_comment();
-  });
-
 </script>

source/js/main.js

@@ -58,6 +58,20 @@ const util = {
   scrollComment: () => {
     document.getElementById('comments').scrollIntoView({behavior: "smooth"});
   },
+
+  viewportLazyload: (target, func, enabled = true) => {
+    if (!enabled || !("IntersectionObserver" in window)) {
+      func();
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio > 0) {
+        func();
+        observer.disconnect();
+      }
+    });
+    observer.observe(target);
+  }
 }
 
 const hud = {