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() {
-      try {
+    if (!el) return;
-        el.innerHTML = '';
+    try {
-      } catch (error) {
+      el.innerHTML = '';
-        console.error(error);
+    } catch (error) {
+      console.error(error);
+    }
+    const script = document.createElement('script');
+    script.src = 'https://beaudar.lipk.org/client.js';
+    script.async = true;
+    for (const key of Object.keys(el.attributes)) {
+      const attr = el.attributes[key];
+      if (['class', 'id'].includes(attr.name) === false) {
+        script.setAttribute(attr.name, attr.value);
       }
-      var script = document.createElement('script');
+    }
-      script.src = 'https://beaudar.lipk.org/client.js';
+    el.appendChild(script);
-      script.async = true;
-      for (let key of Object.keys(el.attributes)) {
-        let 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() {
-      try {
+    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,20 +1,18 @@
-<script>
+<script type="module">
-    function load_twikoo() {
+  const el = document.getElementById('artalk_container');
-        if (!document.querySelectorAll("#twikoo_container")[0]) return;
+  util.viewportLazyload(el, load_twikoo, <%= theme.comments.lazyload ?? false %>);
-        utils.js('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
-            const el = document.getElementById("twikoo_container");
-            var path = el.getAttribute('comment_id');
-            if (!path) {
-                path = decodeURI(window.location.pathname);
-            }
-            twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
-                el: '#twikoo_container',
-                path: path,
-            }));
-        });
-    }
 
-    window.addEventListener('DOMContentLoaded', (event) => {
+  function load_twikoo() {
-        load_twikoo();
+    if (!el) return;
+    utils.js('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
+      const path = el.getAttribute('comment_id');
+      if (!path) {
+        path = decodeURI(window.location.pathname);
+      }
+      twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
+        el: '#twikoo_container',
+        path: path,
+      }));
     });
+  }
 </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() {
-      try {
+    if (!el) return;
-        el.innerHTML = '';
+    try {
-      } catch (error) {
+      el.innerHTML = '';
-        console.error(error);
+    } catch (error) {
+      console.error(error);
+    }
+    const script = document.createElement('script');
+    script.src = 'https://utteranc.es/client.js';
+    script.async = true;
+    for (const key of Object.keys(el.attributes)) {
+      const attr = el.attributes[key];
+      if (['class', 'id'].includes(attr.name) === false) {
+        script.setAttribute(attr.name, attr.value);
       }
-      var script = document.createElement('script');
+    }
-      script.src = 'https://utteranc.es/client.js';
+    el.appendChild(script);
-      script.async = true;
-      for (let key of Object.keys(el.attributes)) {
-        let 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 = {