Question

On the jQuery documentation pages, I notice that the Disqus comments do no open until I scroll to that part of the page.

Scroll down the bottom of this page and you’ll notice the affect: http://api.jquery.com/child-selector/

I was wonder how this was done as I would like to use it on my website as it will help reduce the page loading time.

Answer 1

Having a look at the source for that page, starting on line 461 or so:

jQuery(function(){
  var ds_loaded = false, 
      top = jQuery("#comments").offset().top,
      instructionsCloned = false;

  function check(){
    if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {
        jQuery.getScript("http://jquery.disqus.com/disqus.js?v=2.0&slug=child_selector_8220parent_child8221&pname=wordpress&pver=2.12");
        ds_loaded = true;
    } else if ( !instructionsCloned && document.getElementById('dsq-form-area') ) {

      var instructions = jQuery('ul.comment-instructions');

      instructions.clone().css({
        backgroundColor: instructions.css('backgroundColor'),
        borderWidth: instructions.css('borderWidth'),
        padding: '1em',
        margin: '1em 0'
      }).prependTo('#dsq-form-area');

      jQuery("#dsq-new-post > h3").text("Add a Contribution");

      instructionsCloned = true;
    }
  }

  jQuery(window).scroll(check);

  check();

});

They first get the offset for the top of the comments div:

top = jQuery("#comments").offset().top

then they define a function called check() that checks to see what the current scroll height of the window is and if that, plus the window height, is greater than the offset value then they load the disqus script:

if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {...}

Then they bind this check() function to the scroll event of the window:

jQuery(window).scroll(check);

tl;dr: Everytime you scroll the page, they are checking the height of the scroll against the offset height of the comments div and if it’s viewable, then it loads the disqus scripts (which loads the comments).

HTH 🙂