JQuery 在滚动中加载更多数据

我只是想知道如何才能实现更多的数据滚动只有当 div.load 是可见的。

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

下面的图片就是一个很好的例子。有两个。正在下拉框上加载 div。当用户滚动内容时，无论哪个是可见的，都应该开始为其加载更多的数据。

enter image description here

那我怎么才能知道。加载 div 是否对用户可见？这样我就可以开始加载那个 div 的数据了。

477809 次浏览
小开

你听说过 < strong > 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);
});
小开
最佳答案

在 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
}
});
小开

这里有一个例子:

  1. 在滚动到底部时，附加 html 元素。这种附加机制只执行两次，最后附加一个粉蓝色的按钮。

<!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>

小开

当窗口放大到大于100% 时，这个问题的公认答案与 chrome 有一些问题。下面是由 chrome 开发人员推荐的代码，作为我在同一个 bug 中提出的一部分。

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()){
//Your code here
}
});

参考资料:

相关问题

铬甲虫

小开

如果不是所有的文档滚动，比如说，当文档中有一个滚动 div时，那么上述解决方案如果不进行适应性调整就无法工作。下面是如何检查 div 的滚动条是否已经触底:

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

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

功能:

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

然后你可以使用滚动窗口来调用这个函数(例如，你也可以像我一样将它绑定到一个点击等等，因此这个函数) :

使用方法:

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


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

这种方法也适用于滚动 div 等。我希望它有所帮助，在上面的问题中，您可以使用这种方法来加载部分内容，也许可以添加所有的图像数据，而不是批量提要。

我使用这种方法来减少 https://www.taxformcalculator.com的开销。如果你查看网站和检查元素等，你可以看到对 Chrome 页面加载的影响(例如)。

小开

您提出的问题具体是关于加载数据 当 Div 进入视野时，而不是当用户到达页面末尾时。

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

小开

改进@deep akssn 答案。有一种可能性，你想要的数据加载位 在我们实际上滚动到 底部。

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 ]用于阻塞调用，直到附加了一个新数据。

希望这个能帮上忙。

小开

我建议使用更多的 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
}

提交答案