Loading contents dynamically

Question

I have product listing page, which displays all the products which satisfy the search criteria. And these could be any number of products.

What I want is something like FB, that I display only first 5-7 products and as the user scrolls down, the products should be loaded dynamically.

Answer 1

I'd consider switching to jQuery or Mootools as JS libraries if you want to do this - both have native support for the infinite scroller concept as it's commonly called. It's not that hard to implement yourself though, mainly a matter of keeping track what you loaded last, and installing an onScroll event to detect when the bottom of the page is reached.

Here's a good tutorial using native JS to implement it, both server and client side. You'll need to replace the XHR invocations by the proper Prototype alternatives yourself (or not, wouldn't really matter).