When you search for images on the Bing search engine, the result is displayed like this:
http://www.bing.com/images/search?q=stack+overflow
Notice how you can keep scrolling and scrolling and there is not "normal" paging.
My question is: How do they do this? I can see there is some ajax/javascript events happening, but the code is not easy to read. I especially would like to know how they know when an "empty box" is inside the users view port.
After some searching and reading I found this very good site:
http://www.infinite-scroll.com/
It includes downloadable WordPress and jQuery -plugins and also explains pros/cons of using "Infinite scroll/autopagerize/unpaginate/endless pages"
Sample pseudo/jQuery code to load more data when user has scrolled all the way to the bottom:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
loadMoreRows();
}
});
Here's an article about that technology :
Eliminate paging results by using JavaScript (ala DZone) : Using Javascript, prototype and PHP.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With