How do you call a JavaScript (AJAX) function when the user reaches the end of a page to load new content?

Question

Hi..

On twitter (new twitter) and facebook they now have the the ability to load new tweets and posts when you hit the bottom of the page..

Is there a JavaScript / jQuery event that you can call / add to a div so when the browser hits the bottom it does some ajax call to get the new data?

Thanks

Daniel

Answer 1

It's called "Lazy Loading"

a plugin for jquery: http://www.appelsiini.net/projects/lazyload

in fact there are many plugins: http://www.google.com/search?q=lazy+loading+jquery

googling for Lazy Loading will help you a load :) http://www.google.com/search?q=lazy+loading

Answer 2

Hi,

You may find this useful http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling

Answer 3

Here:

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Answer 4

It's called Infinite Scrolling, and there's a jQuery plugin for it here: http://www.infinite-scroll.com/

Answer 5

There's a jQuery plugin for that: Infinite Scroll jQuery Plugin.

And here's the description of the pattern that it implements: The Interaction Design Pattern.