Geek asks and answers

Load the contents of the div when that div is visible / reached when scrolling

On jQuery documentation pages, I notice that Disqus comments do not open until I go to this part of the page.

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

I was wondering how this was done, since I would like to use it on my website, as this will help reduce page load time.

+3
source share
1 answer

Looking at the source of this page, starting at 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();

});

First they get the offset for the top of the div comments:

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

check(), , , , , , disqus script:

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

check() scroll :

jQuery(window).scroll(check);

tl; dr: , , div , , disqus ( ).

HTH:)

+6

More articles:


All Articles