Lazy Loading Disqus comment Plugin for Blogger

Do you use Disqus and ever realized that it makes your website run slow? People don't like to wait and they hate slow web pages. But you love Disqus and don't want to give up its awesome experience. Wouldn't it be nice if you could use Disqus without affecting website performance? We are going to implement Lazy loading  plugin for Disqus and we will install it in Blogger.

Our Goal

Why would you load comments if user is not going to go till the end of the post? Our goal is simple. Load Disqus only when the user reaches the end of your blog post. We are using an algorithm which checks that the reader has scrolled down till the end of post or not. It's an asynchronous way of using resources and it's a standard practice used by leading websites. If you are not aware of the differences between synchronous and asynchronous calls, then you have trust me on this and consider asynchronous functions as your best pals.

Demo

Performance

I did a small experiment on one of my websites. The comparison shows that my blog web pages load 30% faster and made fewer requests (when Lazy loading plugin is installed. This is a great improvement and I am definitely looking forward to treat my readers with lightning fast content. This test was conducted on Pingdom tools.

How to implement?

If you have checked the demo then you will realize that no Disqus resource have been loaded. The function call gets triggered when you scroll down.

Code:

<div class='comments'>
</div>
<div id='disqus_thread'>
</div>
<script type='text/javascript'>
//<![CDATA[

var comments = document.getElementsByClassName('comments')[0],
    disqusLoaded = false;
function loadDisqus() {
  var disqus_shortname = 'zinkasdemo';
  var dsq = document.createElement('script');
  dsq.type = 'text/javascript';
  dsq.async = true;
  dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  disqusLoaded = true;
}
 
//Get the offset of an object
function findTop(obj) {
  var curtop = 0;
  if (obj.offsetParent) {
    do {
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
 return curtop;
  }
}
 
if(window.location.hash.indexOf('#comments') > 0)
{
  loadDisqus();
}
if(comments) {
  var commentsOffset = findTop(comments);
  window.onscroll = function() {
    if(!disqusLoaded && window.pageYOffset > commentsOffset - 1000)
      loadDisqus();
  }
}
//]]>
</script>

Steps

1. Log in into the blogger account.
2. Go to Blogger Dashboard  >> Layout >> Add a gadget >> HTML/Javascript.
3. Just copy and paste the whole code where you want your comments to appear. The best place to add the code is after the blog widget.
4. Save arrangement.

Please feel free to ask any queries our any help you need with the code.