jQuery 在滚动时加载更多数据

javascript jquery ajax scroll

2022-08-30 02:08:50

我只是想知道，只有当div.loading可见时，我才能在滚动上实现更多数据。

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

下图就是一个很好的例子。下拉框中有两个 .loading div。当用户滚动内容时，无论哪个可见，都应开始为其加载更多数据。

enter image description here

那么我怎么能知道.loading div是否对用户可见呢？所以我只能开始加载该div的数据。

答案 1

在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
    }
});

答案 2

你听说过jQuery Waypoint插件吗？

以下是调用航点插件的简单方法，一旦您到达滚动的底部，页面就会加载更多内容：

$(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);
});