Question

我只是想知道如果div.loading可见，我怎样才能在滚动上实现更多数据。

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

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

enter image description here

那么我怎样才能知道.ding 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 plugin。

下面是调用waypoints插件并让页面在滚动到达底部时加载更多内容的简单方法：

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

Answer 3

以下是一个例子：

滚动到底部时，会显示html元素。这个附加机制只进行了两次，然后最后添加了一个带有粉蓝色的按钮。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>

＆＃13;

Answer 4

当窗口放大到> 100％的值时，此问题的已接受答案与chrome存在一些问题。以下是chrome开发人员推荐的代码，作为我在同一时间提出的错误的一部分。

Page not found (404)
Request Method: GET
Request URL:    http://localhost:8000/polls/1//
Using the URLconf defined in mysite.urls, Django tried these URL patterns, in this order:

polls/ [name='index']
polls/ <int:pk>/ [name='detail']
polls/ <int:pk>/results/ [name='results']
polls/ <int:question_id>/vote/ [name='vote']
admin/
The current path, polls/1//, didn't match any of these.

You're seeing this error because you have DEBUG = True in your Django settings file. Change that to False, and Django will display a standard 404 page.

供参考：

Related SO question

Chrome Bug

Answer 5

改善@deepakssn的答案。您有可能希望数据在之前先加载一下，我们实际上滚动到底部。< / p>

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var scrollLoad]用于阻止调用，直到添加了一个新数据为止。

希望这会有所帮助。

Answer 6

我建议使用更多Math.ceil以避免在某些屏幕上出现错误。
因为在几个不同的屏幕上，它不是绝对准确的
我在console.log时意识到这一点。

console.log($(window).scrollTop()); //5659.20123123890

和

console.log$(document).height() - $(window).height()); // 5660

所以我认为我们应该将您的代码编辑为

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

或者在滚动到底部之前允许从服务器加载数据。

if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
 // Load data
}

Answer 7

如果并非所有文档都滚动，例如，当文档中滚动div时，以上解决方案将无法进行修改。检查div的滚动条是否触底的方法如下：

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});

Answer 8

我花了一些时间试图找到一个很好的函数来包装解决方案。无论如何，最终我觉得在单个页面或整个网站上加载多个内容时，这是一个更好的解决方案。

功能

：

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

然后您可以使用滚动窗口来调用该函数（例如，您也可以将其绑定到click等上，因此也可以将其绑定到该函数上）：

要使用：

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

这种方法也适用于div滚动等。我希望它能对您有所帮助，在上述问题中，您可以使用此方法将您的内容加载到各个部分中，或者追加并从而滴入所有图像数据，而不是批量输入。 / p>

我使用这种方法来减少https://www.taxformcalculator.com上的开销。如果您查看站点并检查元素等，它就解决了这个难题。您可以在Chrome中看到对页面加载的影响（例如）。

Answer 9

您的问题具体是关于何时div进入视图而不是在用户到达页面末尾时加载数据。

这是对您问题的最佳答案：https://stackoverflow.com/a/33979503/3024226

jQuery在滚动上加载更多数据

9 个答案: