We have all seen the automatic content loading used in Facebook. Let’s see how easily it can be implemented using jQuery.
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