Question

I am using jQuery load() to load more content when the user scrolls to bottom of page. Here is my script.

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
        var visible_posts = $('.post').length - 1;
        $(".posts").append('<div class="more-content-'+ visible_posts + '"></div>');
        $(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />');
        $(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts);
    }
});

The problem is this creates weird behaviour and many loading gifs if scrolling of user is too quick.. I think because it append the div with loading div every and each time condition is met even before load is done.

Question is:

Is there A way to Stop the script after the first execution .. Run load() … then re-enable the function ? Something similar to unbind click when you want to disable too fast clicks.

Any idea?

Answer 1

How about re-enable the function after load is complete?

var canLoad = true;
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() && canLoad) {
        canLoad = false;
        // other stuff
        $(".more-content").load('stuff', function() {
           // re-enable scroll function
           canLoad = true;
        });
    }
});