Infinity Scroll

About Infinity Scroll

To begin with, I'd like to say that there are many different jQuery plugins that offer you this functionality, but I personally would advise against these. If you want any custom functionality, you should probably write it up from scratch. Here I will explain few steps to get you started (or maybe cover all you need). In any case I will explain how it works and the best way, in my humble opinion, to get it all done.

Description

Comments should say enough, but just in case, let me write few words. When the page is loaded getMoreItems function is fired which shows the loader (some sort of message or in my case animated gif image), then it builds the list of movies already shown (first time it's a blank list), then it fires the ajax and appends the result (8 new movies) to the div with class "infinite". Finally it resets the processing variable to false and hides the loader. Processing variable is used so that the ajax is not fired while it is still getting results.

Finally scroll is binded to the body, and we check for two things. First - can we get more properties, or is variable processing set to false? Second - are we towards the bottom of the page, or in this case is the percentage of body height over document height greater than 95%? If both conditions are met, we simply fire the getMoreItems function again and we get the next 8 movies. And so on...

Code

<div class="infinite"></div>
<div id="loader"></div>

//set processing variable - so that the ajax is not executed multiple times
var processing = false;

function getMoreItems(){

    //show loader
    $('#loader').show();
    
    //create a list of loaded elements
    var skip = 0;
    $('.movie').each(function(){ skip = skip + ',' + $(this).attr('data-ajax-id'); });
    
    //ajax properties
    $.ajax({
        type: "POST",
        url: "../_infinite.php",
        data:"skip="+skip,
        success: function(data){
        
            //show loaded data
            $(".infinite").append(data);
            
            //run all the plugins for the section
            //if you need to readjust something after load - do it here
            
            //reset the processing variable
            processing = false;
            
            //hide ajax loader
            $('#loader').hide();
            
        }
    });
    
}

$(document).ready(function(){

    //reset bind then bind scrolling
    $(window).unbind('scroll');
    $(window).scroll(function(){
    
        //check for scrolling
        var wintop = $(window).scrollTop();
        var docheight = $(document).height();
        var winheight = $(window).height();
        var scrolltrigger = 0.95;
        
        //check if processing - do nothing
        if(processing) return false;
        
        //if not processing and scrolling
        else if((wintop/(docheight-winheight)) > scrolltrigger) { 
        
            //for debugging purposes - make sure it works
            //console.log('scrolled and fired');
            
            //set processing variable
            processing = true;
            
            //call the function to get more items
            getMoreItems();
             
        }
    });
     
    //initialize infinite scroll
    getMoreItems();
});