Question

I am using infinity load with jquery.window.scroll function with these codes.

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        var page = $('#lastPostsLoader').attr('page')*1;
        $('#lastPostsLoader').attr('page', page + 1);
        DataLoadFunction(page);
    }
});

But these codes requesting double time and sometimes false pages when scroll to bottom. Like this;

Scroll bottom—> loading page 1 and loading page 2—>scroll bottom—>loading page 3 and loading page 2—>scroll bottom—>loading page 4 an loading page 5 ……..

So where am i wrong? Thanks…

Answer 1

you should prevent dataload till next data arrive. set variable isLoadingData as true while data is being loaded from server.

var isLoadingData;
 $(window).scroll(function(){
        if  (($(window).scrollTop() == $(document).height() - $(window).height()) && !isLoadingData ){
              isLoadingData = true; 
            var page = $('#lastPostsLoader').attr('page')*1;
            $('#lastPostsLoader').attr('page', page + 1);
            DataLoadFunction(page, function(){ //  callback get called after data load
                        isLoadingData  = false;
            });
        }
    });