Ajax - limit the loading of a list and then load the rest on scroll

Question

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?

Answer 1

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.

Answer 2

Although it doesn't fix the loading time issue, I created a fairly simple jquery solution to the infinite scrolling without the need for a plugin.

$("#CategoryContent li").slice(20).hide();

Which hides all but the first 20 products in the list.

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});

Waits for the user to scroll past 400px from the bottom of the page, then fades in the next 20, and repeats until all of the products are loaded.

Answer 3

Unless you find a plugin like the one in your link, You would need to return your Ajax in JSON most likely, then go through then process the values from there into your page.

I would suggest you read the documentation on the $.get() or the $.getJSON() for more assistance with this. You should find examples here on how to parse through the JSON data as well on these links.

It should improve load time if you're loading only 20 records at a time instead of 100's at once.

Ajax and SEO, there are certain techniques people use to accomplish this, but I'm not sure if it is as positive for SEO as normal non-ajax content to the web spider. Here is a resource I was able to find online about this subject: http://www.searchenginejournal.com/seo-for-ajax/19138/