jQuery在滚动上加载更多数据

jQuery load more data on scroll(jQuery在滚动上加载更多数据)

问题描述

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

I am just wondering how can i implement more data on scroll only if the div.loading is visible.

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

Usually we look for page height and scroll height, to see if we need to load more data. but the following example is little complicated then that.

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

Following image is perfect example. there are two .loading div's on the drop down box. When user scroll the content, whichever is visible it should start loading more data for it.

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

So how can i find out if .loading div is visible to user yet or not? So i can start loading data for that div only.

推荐答案

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

In jQuery, check whether you have hit the bottom of page using scroll function. Once you hit that, make an ajax call (you can show a loading image here till ajax response) and get the next set of data, append it to the div. This function gets executed as you scroll down the page again.

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

这篇关于jQuery在滚动上加载更多数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！