Use IntersectionObserver to lazyload comments

layout/_third-party/comments/changyan.swig

@@ -2,7 +2,7 @@
   <script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId={{ theme.changyan.appid }}"></script>
 {% elif page.comments %}
   <script>
-  NexT.utils.loadComments(() => {
+  NexT.utils.loadComments(document.querySelector('#SOHUCS'), () => {
     var appid = '{{ theme.changyan.appid }}';
     var conf = '{{ theme.changyan.appkey }}';
     var width = window.innerWidth || document.documentElement.clientWidth;

layout/_third-party/comments/disqus.swig

@@ -12,7 +12,7 @@
 {%- endif %}
 {%- if page.comments %}
 <script>
-  NexT.utils.loadComments(() => {
+  NexT.utils.loadComments(document.querySelector('#disqus_thread'), () => {
     if (window.DISQUS) {
       DISQUS.reset({
         reload: true,

layout/_third-party/comments/disqusjs.swig

@@ -5,7 +5,7 @@
 {%- set disqusjs_js_uri = theme.vendors.disqusjs_js or '//cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js' %}
 
 <script>
-NexT.utils.loadComments(() => {
+NexT.utils.loadComments(document.querySelector('#disqus_thread'), () => {
   NexT.utils.getScript('{{ disqusjs_js_uri }}', () => {
     window.dsqjs = new DisqusJS({
       api: '{{ theme.disqusjs.api }}' || 'https://disqus.com/api/',

layout/_third-party/comments/gitalk.swig

@@ -5,7 +5,7 @@
 {%- set gitalk_js_uri = theme.vendors.gitalk_js or '//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js' %}
 
 <script>
-NexT.utils.loadComments(() => {
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
   NexT.utils.getScript('{{ gitalk_js_uri }}', () => {
     var gitalk = new Gitalk({
       clientID: '{{ theme.gitalk.client_id }}',

layout/_third-party/comments/livere.swig

@@ -1,6 +1,6 @@
 {%- if page.comments %}
 <script>
-NexT.utils.loadComments(() => {
+NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
   window.livereOptions = {
     refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
   };

layout/_third-party/comments/valine.swig

@@ -1,15 +1,15 @@
 {%- set valine_uri = theme.vendors.valine or '//unpkg.com/valine/dist/Valine.min.js' %}
 
 <script>
-NexT.utils.loadComments(() => {
+NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
   NexT.utils.getScript('{{ valine_uri }}', () => {
     var GUEST = ['nick', 'mail', 'link'];
     var guest = '{{ theme.valine.guest_info }}';
     guest = guest.split(',').filter(item => {
       return GUEST.includes(item);
     });
     new Valine({
-      el: '#comments',
+      el: '#valine-comments',
       verify: {{ theme.valine.verify }},
       notify: {{ theme.valine.notify }},
       appId: '{{ theme.valine.appid }}',

scripts/filters/comment/changyan.js

@@ -11,7 +11,7 @@ hexo.extend.filter.register('theme_inject', injects => {
   if (!theme.changyan.enable || !theme.changyan.appid || !theme.changyan.appkey) return;
 
   injects.comment.raw('changyan', `
-  <div class="comments" id="comments">
+  <div class="comments">
     <div id="SOHUCS"></div>
   </div>
   `, {}, {cache: true});

scripts/filters/comment/disqus.js

@@ -11,7 +11,7 @@ hexo.extend.filter.register('theme_inject', injects => {
   if (!theme.disqus.enable || !theme.disqus.shortname) return;
 
   injects.comment.raw('disqus', `
-  <div class="comments" id="comments">
+  <div class="comments">
     <div id="disqus_thread">
       <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
     </div>

scripts/filters/comment/disqusjs.js

@@ -10,7 +10,7 @@ hexo.extend.filter.register('theme_inject', injects => {
   if (!theme.disqusjs.enable || !theme.disqusjs.shortname || !theme.disqusjs.apikey) return;
 
   injects.comment.raw('disqusjs', `
-  <div class="comments" id="comments">
+  <div class="comments">
     <div id="disqus_thread">
       <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
     </div>

scripts/filters/comment/livere.js

@@ -10,7 +10,7 @@ hexo.extend.filter.register('theme_inject', injects => {
   if (!theme.livere_uid) return;
 
   injects.comment.raw('livere', `
-  <div class="comments" id="comments">
+  <div class="comments">
     <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
   </div>
   `, {}, {cache: true});

scripts/filters/comment/valine.js

@@ -10,7 +10,7 @@ hexo.extend.filter.register('theme_inject', injects => {
   let theme = hexo.theme.config;
   if (!theme.valine.enable || !theme.valine.appid || !theme.valine.appkey) return;
 
-  injects.comment.raw('valine', '<div class="comments" id="comments"></div>', {}, {cache: true});
+  injects.comment.raw('valine', '<div class="comments" id="valine-comments"></div>', {}, {cache: true});
 
   injects.bodyEnd.file('valine', path.join(hexo.theme_dir, 'layout/_third-party/comments/valine.swig'));
 

source/js/utils.js

@@ -376,30 +376,19 @@ NexT.utils = {
     }
   },
 
-  loadComments: function(callback) {
-    if (!CONFIG.comments.lazyload || !document.getElementById('comments')) {
-      return callback();
-    }
-    var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
-    if (offsetTop <= 0) {
-      // load directly when there's no a scrollbar
+  loadComments: function(element, callback) {
+    if (!CONFIG.comments.lazyload) {
       callback();
-    } else {
-      var scrollListener = () => {
-        // offsetTop may changes because of manually resizing browser window or lazy loading images.
-        var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
-        var scrollTop = window.scrollY;
-
-        // pre-load comments a bit? (margin or anything else)
-        if (offsetTop - scrollTop < 60) {
-          window.removeEventListener('scroll', scrollListener);
-          callback();
-        }
-      };
-      window.addEventListener('scroll', scrollListener);
-      window.addEventListener('pjax:send', () => {
-        window.removeEventListener('scroll', scrollListener);
-      });
+      return;
     }
+    let intersectionObserver = new IntersectionObserver((entries, observer) => {
+      let entry = entries[0];
+      if (entry.isIntersecting) {
+        callback();
+        observer.disconnect();
+      }
+    });
+    intersectionObserver.observe(element);
+    return intersectionObserver;
   }
 };