Fixed disqus async load with intersection observer

Author: chicio

_includes/dependencies-js-blog.html

@@ -18,7 +18,7 @@
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG"></script>
 {% endif %}
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
-<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=7878cb2532f75ed3af6934acec4c2205"></script>
+<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=0c9e9c3055977cc5c44727b808ce2c51"></script>
 <script type="text/javascript">
     ChicioCodingBlog.init('{{ include.track-category }}', {{ include.shouldActivatePullToRefresh }})
 </script>

_includes/service-worker-js-blog-urls.js

@@ -1 +1 @@
-"/assets/js/index.blog.min.js?rev=7878cb2532f75ed3af6934acec4c2205",
+"/assets/js/index.blog.min.js?rev=0c9e9c3055977cc5c44727b808ce2c51",

_js/blog/disqus.js

@@ -5,17 +5,25 @@ const disqus = () => {
     this.page.identifier = window.location.href
   }
   const intersectionObserver: IntersectionObserver = new IntersectionObserver(
-    loadDisqus,
-    { rootMargin: '250px 0px', threshold: 0.01 }
+    onIntersection,
+    { rootMargin: '100px 0px', threshold: 0.01 }
   )
   const disquisThread = document.getElementById('disqus_thread')
   if (disquisThread) {
     intersectionObserver.observe(disquisThread)
   }
 }
 
-const loadDisqus = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
-  observer.unobserve(entries[0].target)
+const onIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void => {
+  for (let i: number = 0; i < entries.length; i++) {
+    if (entries[i].intersectionRatio > 0) {
+      loadDisqus(entries[i].target, observer)
+    }
+  }
+}
+
+const loadDisqus = (element: HTMLElement, observer: IntersectionObserver) => {
+  observer.unobserve(element)
   const s = document.createElement('script')
   s.src = 'https://fabrizio-duroni.disqus.com/embed.js'
   s.setAttribute('data-timestamp', `${+new Date()}`)

_jsbuild/blog/disqus.js

@@ -5,17 +5,25 @@ const disqus = () => {
     this.page.identifier = window.location.href
   }
   const intersectionObserver = new IntersectionObserver(
-    loadDisqus,
-    { rootMargin: '250px 0px', threshold: 0.01 }
+    onIntersection,
+    { rootMargin: '100px 0px', threshold: 0.01 }
   )
   const disquisThread = document.getElementById('disqus_thread')
   if (disquisThread) {
     intersectionObserver.observe(disquisThread)
   }
 }
 
-const loadDisqus = (entries, observer) => {
-  observer.unobserve(entries[0].target)
+const onIntersection = (entries, observer) => {
+  for (let i = 0; i < entries.length; i++) {
+    if (entries[i].intersectionRatio > 0) {
+      loadDisqus(entries[i].target, observer)
+    }
+  }
+}
+
+const loadDisqus = (element, observer) => {
+  observer.unobserve(element)
   const s = document.createElement('script')
   s.src = 'https://fabrizio-duroni.disqus.com/embed.js'
   s.setAttribute('data-timestamp', `${+new Date()}`)