Ajax - 限制列表的加载，然后在滚动时加载其余部分答案

【问题标题】：Ajax - limit the loading of a list and then load the rest on scrollAjax - 限制列表的加载，然后在滚动时加载其余部分
【发布时间】：2012-05-02 02:11:26
【问题描述】：

我有一家商店，在一个页面上显示一个类别的所有产品（这是所有者喜欢它的方式，因此不能选择分页）。

为了缩短一些繁重类别的加载时间，我希望实现一个脚本，它将加载许多产品<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 等，我不确定这是否会改善页面加载？

【问题讨论】：

标签： jquery ajax scroll dynamic-loading

【解决方案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 像素中淡入，并重复直到加载所有产品。

【讨论】：

老兄，你是摇滚明星！我一直在寻找一些可以在移动网站上的 PHPified RSS 提要上简单实现的东西，而且效果很好！干杯！
@James ...请您详细说明您对这个问题的回答。因为我还得到了大约 2700 行数据，我想在用户向下滚动时自动加载......
根据您的数据的设置方式（我的数据在 li 中），此代码将分割前 20 行并在页面加载时隐藏其余行。这是第一行。由于我们已经有了前 20 个，我们将一个变量设置为 20，另一个设置为 40（因此这将加载下一个 20）。然后 (window).scroll 函数跟踪浏览器，当用户接近页面底部时，它将加载接下来的 20 个。要将其应用于您的情况，您需要将 #CategoryContent id 更改为您持有的任何内容div 被调用，li 被调用到每个单独的项目是什么。希望对您有所帮助。

【解决方案2】：

这是一个叫做无限滚动的概念。谷歌，你会找到你要找的。p>

infinite-scroll-jquery-plugin 是一个 jQuery 插件，它将支持您正在尝试做的事情，还有其他的。

【讨论】：

【解决方案3】：

除非您在链接中找到类似的插件，否则您最有可能需要以 JSON 格式返回您的 Ajax，然后通过然后将值从那里处理到您的页面中。

我建议您阅读$.get() 或$.getJSON() 上的文档以获得更多帮助。您应该在此处找到有关如何解析 JSON 数据以及这些链接的示例。

如果您一次只加载 20 条记录而不是一次加载 100 条记录，它应该会缩短加载时间。

Ajax 和 SEO，人们使用某些技术来实现这一点，但我不确定它对 SEO 是否像普通的非 ajax 内容对网络蜘蛛一样积极。这是我在网上找到的关于这个主题的资源：@987654323@

【讨论】：