3

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

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

    4

    3 回答 3

    6

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

}
});

    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.

    于 2012-05-03T02:12:54.600 回答
    4

    这是一个称为无限滚动的概念。谷歌，你会找到你要找的。

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

    于 2012-05-02T02:34:06.973 回答
    0

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

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

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

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

    于 2012-05-02T02:21:20.153 回答