客户端无限滚动 JQuery答案

【问题标题】：Client Side Infinite Scrolling JQuery客户端无限滚动 JQuery
【发布时间】：2013-01-13 03:28:03
【问题描述】：

我正在尝试为我的网站制作一个 [twitter like - LazyLoad] cmets 页面。我发现很多使用 PHP [用于服务器端] 的插件。

我试过了：Sausage、Jquery4u、Infinite Ajax Scroll .. 还有更多here

我使用 C#，所以我只想要一个可以在客户端使用静态数据的插件，以便以后可以使用 Json 处理它。

有没有像这样工作的 Continuos 滚动插件？

【问题讨论】：

标签： javascript jquery lazy-loading infinite-scroll ondemand

【解决方案1】：

Masonry 允许您执行此操作，包括显示数据的奇特方式。您可以从该代码中获取加载程序

http://masonry.desandro.com/demos/infinite-scroll.html

【讨论】：

但是对于滚动插件，它使用了Infinite Scroll，它仍然使用PHP从数据库中获取数据。
我的错，我认为它也有离线方法 :-)

【解决方案2】：

您展示的其中一个示例适用于任何服务器端技术，包括 ASP.NET。

只是一些基本的 HTML 开始：

<div id="posts">
   <div class="item">Starting content</div>
   <div id="loadmore" style="display: none"><img src="ajax-loader.gif" alt="Loading..." /></div>
</div>

还有一小段 jQuery 代码（不需要插件）：

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $("#loadmore").show();

        $.ajax({
          url: "loadmore.aspx",
          contentType: "text/html; charset=utf-8"
        ).done(function(html) {
            if (html) {
                $("#posts").append(html);
                $("#loadmore").hide();
            } else
                $("#loadmore").html("No more posts to show.");
        });
    }
});

由于 ASPX 代码呈现为 HTML，因此可以将内容直接附加到 #posts 包装器上。您当然需要稍微调整一下代码，将一些参数传递给您的 ASPX 以了解要检索多少帖子并从哪个帖子开始......但是客户端代码不再是这里的问题了。

【讨论】：