jQuery 在滚动时加载更多数据
[英]jQuery load more data on scroll
问题描述
我只是想知道如何才能在 div.loading 可见时在滚动上实现更多数据。
通常我们会查找页面高度和滚动高度，看看是否需要加载更多数据。 但下面的例子有点复杂。
下图是完美的例子。 下拉框中有两个 .loading div。 当用户滚动内容时，无论哪个可见，它都应该开始为其加载更多数据。
那么我如何才能知道 .loading div 是否对用户可见？ 所以我只能开始加载那个 div 的数据。
9 个解决方案
解决方案1
314 已采纳 2013-06-13 02:02:26
在 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
}
});
解决方案2
87 2012-12-26 01:30:47
您听说过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);
});
解决方案3
12 2017-08-23 18:13:55
下面是一个例子：
- 滚动到底部时，会附加 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>
解决方案4
12 2018-10-19 11:49:41
如果不是所有文档都滚动，例如，当文档中有滚动div ，则上述解决方案在没有调整的情况下将无法工作。 下面是如何检查 div 的滚动条是否到达底部：
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
解决方案5
11 2018-06-11 06:47:12
解决方案6
3 2020-05-22 12:20:14
改进@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] 用于阻止调用，直到附加一个新数据。
希望这可以帮助。
解决方案7
3 2020-08-07 08:10:10
我建议使用更多的 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
}
解决方案8
1 2018-11-02 13:15:54
我花了一些时间试图找到一个很好的函数来包装解决方案。 无论如何，最终我认为这是在单个页面上或跨站点加载多个内容时更好的解决方案。
功能：
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 调用该函数（例如，您也可以像我一样将其绑定到单击等，因此是该函数）：
使用：
$(window).scroll(function (event) {
ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html");
ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html");
});
这种方法也应该适用于滚动 div 等。我希望它有所帮助，在上面的问题中，您可以使用这种方法将内容加载到部分中，可能会附加并由此运载所有图像数据而不是批量提要。
我使用这种方法来减少https://www.taxformcalculator.com上的开销。 如果您查看站点并检查元素等，它就解决了问题。您可以看到对 Chrome 中页面加载的影响（例如）。
解决方案9
0 2019-10-29 07:30:37
您的具体问题是在 div 进入 view 时加载数据，而不是在用户到达页面末尾时加载数据。
这是您问题的最佳答案： https : //stackoverflow.com/a/33979503/3024226
如何在 jQuery 中加载更多滚动或滚动数据？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.