我只是想知道只有在 div.loading 可见的情况下,我如何才能在滚动上实现更多数据。
通常我们会寻找页面高度和滚动高度,看看是否需要加载更多数据。但下面的例子有点复杂。
下图是完美的例子。下拉框中有两个 .loading div。当用户滚动内容时,无论哪个可见,它都应该开始为其加载更多数据。
那么我怎样才能知道 .loading div 是否对用户可见呢?所以我可以开始只为那个 div 加载数据。
我只是想知道只有在 div.loading 可见的情况下,我如何才能在滚动上实现更多数据。
通常我们会寻找页面高度和滚动高度,看看是否需要加载更多数据。但下面的例子有点复杂。
下图是完美的例子。下拉框中有两个 .loading div。当用户滚动内容时,无论哪个可见,它都应该开始为其加载更多数据。
那么我怎样才能知道 .loading div 是否对用户可见呢?所以我可以开始只为那个 div 加载数据。
在 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);
});
如果不是所有文档都滚动,例如,当您在文档中滚动时,如果div
没有调整,上述解决方案将无法工作。以下是如何检查 div 的滚动条是否已到达底部:
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
这是一个例子:
<!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>
改进@deepakssn 的答案。在我们实际滚动到底部之前,您可能希望数据加载一点。
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
}
我花了一些时间试图找到一个很好的函数来包装解决方案。无论如何,我认为这是在单个页面或跨站点上加载多个内容时更好的解决方案。
功能:
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 进入 view 时加载数据,而不是在用户到达页面末尾时加载数据。