This guide is all about loading Disqus comments the right way based on the actions performed by the user. In other words, loading the comments on either clicking a button or scrolling down the window.

Load Disqus on Click Event

Platform independent commenting systems like Disqus are quite popular these days. Besides a few drawbacks of such systems, we have some advantages as well:

  1. They offer a lot of features and added functionalities to make comments
  2. You don’t have to maintain a separate database for comments
  3. You don’t have to worry about comment spam and moderation

Lazy-loading Disqus can be your one step closer to a quick-loading minimal website. Doing so might also cut down that small bit of extra load-time it takes to query the comment database.

The task becomes easy with platform-independent commenting systems like Disqus. We have the advantage of Disqus’s JavaScript API Disqus to load comments asynchronously.

Recommended Reading: Loading JavaScript files Asynchronously

Preface

With these methods, the comment section won’t load when the user requests a page or post of your site. That means your site loads a little bit faster than it would with all the comments, comment form etc.

Disqus embed JavaScript looks for a division #disqus_thread in your web pages. On finding one, it loads all the comments inside that division. So, the idea is to control the loading of embed JS file only.

Code snippets shared below force the Disqus embed JS load only on certain events. I guess that sounds savvy enough.

I’m not including the full documentation in the code featured here to keep things simple. If you are looking for the documentation, please refer the source of demo pages.

jQuery to load Disqus on click-event

Add this code to your site where you want to make Disqus comments to appear only when a button gets clicked. The only prerequisite is that your site must be using jQuery. No jQuery? No worries, see the next section.

<script>
/**
 * Disqus loader which verifies the existence of `#disqus_thread` on 
 * the web page and then prepares the disqus embed script to hook in 
 * the document
 */
function load_disqus( disqus_shortname ) {
  // Prepare the trigger and target
  var disqus_trigger = jQuery('#disqus_trigger'),
      disqus_target = jQuery('#disqus_thread');

  // Load script asynchronously only when the trigger and target exist
  if(disqus_target && disqus_trigger) {
    jQuery.ajaxSetup({ cache:true });
    jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
    jQuery.ajaxSetup({ cache:false });
    disqus_trigger.remove();
    console.log('Disqus loaded.');
  }
}
</script>
<div id="disqus_thread"></div>
  <button id="diqus_loader" onclick="load_disqus('your_disqus_shortname')">Post a Comment</button>
</div>

We defined a function load_disqus() that performs the following tasks basically:

  1. Asks for your Disqus Shortname that you use with your website
  2. Loads the appropriate Disqus Embed JavaScript using your Disqus Shortname
  3. Adds a division #disqus_loader to the page with an action button to trigger loading

Live Demo: Disqus on button-click

Plain JavaScript to load Disqus on click

Not using jQuery on your website because of it’s heavy file-size? No problem, below is the vanilla JavaScript version for the same:

<script>
function load_disqus( disqus_shortname ) {
  // Prepare the trigger and target
  var disqus_trigger = document.getElementById('disqus_trigger'),
      disqus_target = document.getElementById('disqus_thread'),
      disqus_embed  = document.createElement('script'),
      disqus_hook   = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);

  // Load script asynchronously only when the trigger and target exist
  if( disqus_target && disqus_trigger ) {
    disqus_embed.type = 'text/javascript';
    disqus_embed.async = true;
    disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    disqus_hook.appendChild(disqus_embed);
    disqus_trigger.remove();
    console.log('Disqus loaded.');
  }
}
</script>
<div id="disqus_thread"></div>
  <button id="diqus_trigger" onclick="load_disqus('your_disqus_shortname')">Post a Comment</button>
</div>

Don’t forget to add your own Disqus shortname in place of your_disqus_shortname. Read more notes.

Lazy-loading Disqus on Scroll

Lazy loading Disqus on Scroll

I modified the above function here and there and made it work when the user scrolls down the page. Below given JavaScript performs the following tasks in the document:

  1. Defines the #disqus_thread element, where our comments could be loaded
  2. Adds #disqus_empty to detect changes in the content of #disqus_thread. This will help us to avoid repeated loading of data
  3. Prepares disqus embed JavaScript file to get hooked in the document
  4. Checks if the user has scrolled till the comment section* and loads the comments

* Actually a little bit before it for the lazy-loading touch.

Check below the modded version for scroll event:

<div id="disqus_thread">
  <div id="disqus_empty"></div>
</div>
<script>
function load_disqus( disqus_shortname ) {
  // Prepare the trigger and target
  var is_disqus_empty = document.getElementById('disqus_empty'),
      disqus_target   = document.getElementById('disqus_thread'),
      disqus_embed    = document.createElement('script'),
      disqus_hook     = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);

  // Load script asynchronously only when the trigger and target exist
  if( disqus_target && is_disqus_empty ) {
    disqus_embed.type = 'text/javascript';
    disqus_embed.async = true;
    disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    disqus_hook.appendChild(disqus_embed);
    is_disqus_empty.remove();
  }
}

/*
 * Load disqus only when the document is scrolled till the top of the
 * section where comments are supposed to appear.
 */
window.addEventListener('scroll', function(e) {
  var currentScroll = document.scrollingElement.scrollTop;
  var disqus_target = document.getElementById('disqus_thread');

  if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top - 150) ) {
    load_disqus('w3bits');
    console.log('Disqus loaded.');
  }
}, false);
</script>

Test drive Lazy-loading Disqus comments

jQuery variant of lazy-loading Disqus

In case you make good use of jQuery on your website, this may come in handy:

<div id="disqus_thread">
  <div id="disqus_empty"></div>
</div>
<script>
function load_disqus( disqus_shortname ) {
  // Prepare the trigger and target
  var is_disqus_empty = jQuery('disqus_empty'),
      disqus_target   = jQuery('disqus_thread'),
      disqus_hook     = (jQuery('head')[0] || jQuery('body')[0]);

  // Load script asynchronously only when the trigger and target exist
  if( disqus_target && is_disqus_empty ) {
    jQuery.ajaxSetup({ cache:true });
    jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
    jQuery.ajaxSetup({ cache:false });
    is_disqus_empty.remove();
  }
}

jQuery(document).scroll( function(e) {
  var currentScroll = $(window).scrollTop;
  var disqus_target = jQuery('#disqus_thread');

  if( currentScroll > disqus_target.getBoundingClientRect().top - 150 ) {
    load_disqus('w3bits');
    console.log('Disqus loaded.');
  }
}, false);
</script>

Notes

  • Replace your_disqus_shortname with your Disqus shortname in the above code blocks.
  • Your Disqus shortname is generally the username you use to log into your Disqus account.
  • The division with the disqus_thread ID is where the comments load up on using any of the above two ways.
  • Don’t go for the jQuery method if you’re not using it on your website. Using jQuery only to load comments is not a good idea.
Read further