jQuery在滚动中加载更多数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (29)

我只是想知道如何才能实现滚动更多的数据只有div.loading是可见的。

通常我们会查找页面高度和滚动高度,以查看是否需要加载更多数据。但是下面的例子并不复杂。

以下图像是完美的例子。在下拉框中有两个加载div。当用户滚动内容时,无论哪一个都可见,它应该开始为它加载更多的数据。

那么,如何找出.loading div对用户是否可见呢?所以我可以开始只为该div加载数据。

提问于
用户回答回答于

在jQuery中,使用滚动功能检查您是否触碰了页面的底部。一旦你点击了,就做一个ajax调用(你可以在这里显示一个加载图像,直到ajax响应)并获取下一组数据,并将其附加到div。此功能在你再次向下滚动页面时执行。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
用户回答回答于

以下是调用航点信息插件的简单方法,并且在滚动到达底部时让页面加载更多内容:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});

扫码关注云+社区