客户端无限滚动JQuery

时间:2013-01-29 14:14:49

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

我正在尝试为我的网站制作一个[twitter like - LazyLoad]评论页面。 我找到了许多使用PHP [服务器端]执行此操作的插件。

我尝试过:SausageJquery4uInfinite Ajax Scroll ..&还有更多here

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

是否有适用于Continuos滚动的插件?

2 个答案:

答案 0 :(得分:1)

Masonry允许您这样做,包括一种显示数据的奇特方式。你可以从该代码中获取加载器

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

答案 1 :(得分:0)

您展示的其中一个示例可以很好地适用于任何服务器端技术,包括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,以了解要检索多少帖子并从帖子开始...但是客户端代码不再是问题了。