Autoload disqus comments when in viewport.

brijeshb42 · Sep 1, 2015 · 100991c · 100991c
1 parent 85c5910
commit 100991c
Showing 1 changed file with 43 additions and 4 deletions.
diff --git a/js/script.js b/js/script.js
@@ -26,8 +26,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     var disqus_shortname = '';
     var dt = document.getElementById("disqus_thread");
 
-    cmtBtn.addEventListener("click", function(e){
-        e.preventDefault();
+    function loadDisqus() {
         if(disqus_shortname === ''){
             disqus_shortname = '{{ site.disqus }}';
             dt.innerHTML = 'Loading comments...';
@@ -37,13 +36,53 @@ document.addEventListener("DOMContentLoaded", function(event) {
                 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
             })();
         }
-        if(hidden){
+        if(commentHidden){
             dt.setAttribute('style','display:block');
             this.innerHTML = 'Hide Comments';
         }else{
             dt.setAttribute('style','display:none');
             this.innerHTML = 'Comments';
         }
-        hidden = !hidden;
+        commentHidden = !commentHidden;
+    }
+
+    cmtBtn.addEventListener("click", function(e){
+        e.preventDefault();
+        loadDisqus(); 
     });
+
+    var scrolling = false;
+
+    function isElementInViewport (el) {
+        if (typeof jQuery === "function" && el instanceof jQuery) {
+            el = el[0];
+        }
+
+        var rect = el.getBoundingClientRect();
+
+        scrolling = false;
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+        );
+    }
+
+    function enableScrolling(e) {
+        scrolling = true;
+    }
+
+    window.addEventListener('scroll', enableScrolling);
+
+    var interval = setInterval(function() {
+        if(!scrolling) {
+            return false;
+        }
+        if(isElementInViewport(cmtBtn)) {
+            loadDisqus();
+            clearInterval(interval);
+            window.removeEventListener('scroll', enableScrolling);
+        }
+    }, 400);
 });