javascript - jQuery 在滚动时加载更多数据

Question

我只是想知道如何仅在 div.loading 可见的情况下在滚动上实现更多数据。

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

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

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

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