Ajax - limit the loading of a list and then load the rest on scroll
ajax, dynamic-loading, jquery, scroll
Solution
This is a concept called infinite scrolling. Google for that, and you'll find what you're looking for.
infinite-scroll-jquery-plugin is a jQuery plugin that will support what you're trying to do, and there are others.
Problem
I have a store that shows all products of a category on one page (and this is how the owner likes it so pagination is not an option). To improve load time on some heavy categories, I'm hoping to implement a scrip which will load a number of products `<li>s` and then on page scroll, load another set. The page is generated with this structure ``` <div id="CategoryContent"> <ul class="ProductList"> <li class="Odd">Product</li> <li class="Even">Product</li> <li class="Odd">Product</li> <li class="Even">Product</li> </ul> ``` Ideally I would like to. Load first 25 `<li>Products</li>` and when the user scrolls to the bottom, load the next 20 until the whole page is loaded. I've never played with AJAX before so I'm not sure if: - It's possible with the current setup - Going to improve load time - Affect SEO for those pages I have viewed some examples and demos such THIS JQUERY EXAMPLE - but this requires specific id's etc and I'm not sure if that would improve page loading?