Facebook Like Automatic Content Loading on Scrolling

We have all seen the automatic content loading used in Facebook. Let’s see how easily it can be implemented using jQuery.

View Demo

What we do to achieve this is whenever a scroll event is fired, check if we have reached the bottom of the page, and if we are at the bottom, call our ajax function to load the content.

 

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        // Reached page bottom. Call the ajax function or any other foo here.
    }
});

 

.scroll() is fired every time the user scrolls the page.
$(window).scrollTop() returns the number of pixels hidden ‘above’ when the page is scrolled.
$(window).height() gives the height of the window. Same as window.innerHeight
$(document).height() gives the total height of the page.

Well, that’s that. Cool, right?

Facebook content Loading

Automatic Content Loading in Facebook


23 Comments