CODEWITHSUNDEEP
jqueryscroll
pheaselegen
pheaselegen

Reputation: 398

jQuery infinite scroll double load

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...

Upvotes: 2

Views: 2377

Answers (1)

Anoop
Anoop

Reputation: 23208

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;
            });
        }
    });

Upvotes: 4

Related Questions