Ajax - 限制列表的加载,然后在滚动时加载其余的

Question

我有一个商店,在一个页面上显示所有类别的产品(这是所有者喜欢它的方式,因此分页不是一个选项).

为了改善某些重类别的加载时间,我希望实现一个脚本,它将加载许多产品<li>s,然后在页面滚动,加载另一个集合.

使用此结构生成页面

<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>

理想情况下我想.首先加载25 <li>Products</li>,当用户滚动到底部时,加载下一个20,直到加载整个页面.

我之前从未玩过AJAX所以我不确定是否:

当前的设置可以实现

要改善加载时间

影响那些页面的SEO

我已经查看了一些示例和演示,例如这个JQUERY示例 - 但这需要特定的ID等,我不确定这是否会改善页面加载？

Answer 1

虽然它没有解决加载时间问题,但我为无限滚动创建了一个相当简单的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

}
});

等待用户从页面底部滚动超过400px,然后在接下来的20个中淡出,并重复直到所有产品都加载完毕.