我只是想知道如何才能在 div.loading 可见时在滚动上实现更多数据。
通常我们会查找页面高度和滚动高度，看看是否需要加载更多数据。但下面的例子有点复杂。
下图是完美的例子。下拉框中有两个 .loading div。当用户滚动内容时，无论哪个可见，它都应该开始为其加载更多数据。
那么我如何才能知道 .loading div 是否对用户可见？所以我只能开始加载那个 div 的数据。
jQuery 在滚动时加载更多数据
IT技术
javascript
jquery
ajax
scroll
2021-01-30 06:06:04
6个回答
在 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
}
});
您听说过jQuery Waypoint 插件吗？
以下是调用航点插件并在滚动到达底部后让页面加载更多内容的简单方法：
$(document).ready(function() {
var $loading = $("<div class='loading'><p>Loading more items…</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);
});
下面是一个例子：
- 滚动到底部时，会附加 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>如果不是所有文档都滚动，例如，当您在文档中滚动时div，那么上述解决方案在没有调整的情况下将无法工作。下面是如何检查 div 的滚动条是否已经触底：
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});