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.