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?

Automatic Content Loading in Facebook

Share the post with your friends!

• 

You might also like these posts:

1. The Making of a jQuery Plugin