jQuery加载关于滚动的更多数据。

Question

jQuery加载关于滚动的更多数据。我只是想知道，只有在div.load可见的情况下，我才能在滚动中实现更多的数据。通常我们会查找页面高度和滚动高度，以查看是否需要加载更多数据。但是下面的例子并不复杂。下面的图像就是一个很好的例子。在下拉框上有两个。装载div。当用户滚动内容时，无论哪个是可见的，它都应该开始为其加载更多的数据。那么，我如何才能发现.load 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
    }});

Answer 2

你听说过jQuery Waypoint插件.

下面是调用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);});