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.
|
1 2 3 4 5 |
$(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