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

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?

    Answers


    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.


    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.


    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/


    Need Your Help

    How to keep only single form open in delphi

    delphi

    I have VCL application in delphi. One main form and many child forms.

    About UNIX Resources Network

    Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.