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

Question

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

I have a store that displays all products of a category on one page (and the owner likes this, so pagination is not an option).

To increase the load time in some heavy categories, I hope to implement a script that will load several products <li>s, and then, on the scroll page, load a different set.

The page is created using 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. First load 25 <li>Products</li>, and when the user scrolls down, load the next 20 until the entire page is loaded.

I have never played with AJAX, so I'm not sure if:

Possibly with the current setting. Improving loading time. Affects SEO for these pages.

JQUERY EXAMPLE - .., , ?

+3

jquery ajax scroll dynamic-loading

James 02 '12 2:11

3

, jquery .

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

, 20 .

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

}
});