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

我查看了一些示例和演示，例如 THIS JQUERY EXAMPLE - 但这需要特定的 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

}
});

等待用户从页面底部滚动超过 400 像素，然后在接下来的 20 像素中淡出，并重复直到加载所有产品。