上滚动的jQuery加载更多的数据 [英] jQuery load more data on scroll

问题描述

我只是想知道我怎么能实现在滚动更多的数据只有在div.loading是可见的。

im 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格是可见的用户还没有？这样我就可以开始加载数据，仅股利。

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的航点插件 。

Have you heard about the jQuery Waypoint plugin.

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

Below is the simple way of calling a waypoints plugin and having the page load more Content once you reaches the bottom on scroll :

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

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