Using Twitter Bootstrap's Scrollspy to lazy load (load on scroll) async JavaScript?

Question

First, this is how I'd normally load the comments.

The HTML markup:

<div id="comments">

    <div id="disqus_thread">

        <!-- Comments are dynamically loaded (via JS) here. -->

    </div>

</div>

And the JavaScript code (custom.js):

$j=jQuery.noConflict();

$j(document).ready(function() {

    $j('#displayComments');
    var disqus_shortname = 'paulund';

    $j.ajax({
        type: "GET",
        url: "http://" + disqus_shortname + ".disqus.com/embed.js",
        dataType: "script",
        cache: true
    });

});

Now, coming to the point...

I'd like to load the comments, only when the user scrolls down to the comments section, i.e. div#comments.

Although not meant for this purpose, I've been told that Twitter Bootstrap's Scrollspy plugin could be used for doing this.

But I am not sure how.

(I've read the docs and tried various markups, but couldn't get it to work; and decided to start over from scratch.)

Here's a skeleton of the comments to test on: http://jsfiddle.net/MvTgk/ (and its respective demo)

PS: In case you don't have the time to write a full-fledged answer, please drop any hints/suggestions in the comments. I'll be happy to try them myself.

Answer 1

The ScrollSpy plugin is probably not what you should use.

According to the Bootstrap documentation "the ScrollSpy plugin is for automatically updating nav targets based on scroll position". Therefore, it should only be used for that.

Since you are using jQuery, you could use Sizzle to check when the comments box is visible.

$(window).on("scroll", function check() {
    if( $('#displayComments').is(':visible') ) {
      // Remove event listener as it is not needed anymore
      $(window).off("scroll", check);

      $.ajax({
          type: "GET",
          url: "http://" + disqus_shortname + ".disqus.com/embed.js",
          dataType: "script",
          cache: true
      });      

    }
});    

Answer 2

Well, considering that Twitter Bootstrap's Scrollspy isn't made for the purpose I am after, I've chosen to go with jQuery Waypoints. Lazy loading comments only when the section comes into view is very simple now.

Here's how I had to modify the JavaScript code:

$j = jQuery.noConflict();
$j(document).ready(function () {

    $j('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';
        $j.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });

});

NOTES:

• The offset: '100%' is used to make sure that Javascript comments are displayed as soon as div#comments comes into view (from the bottom, as we scroll down) and not only when it gets to the top of the view-port, which is the default.

• triggerOnce: true makes sure that the action is triggered only once, i.e. waypoint will destroy itself after its first trigger (i.e. won't be triggered every time the user scrolls up/down the page). This is the same as calling .waypoint('destroy') at the end of the callback function.