1 回答

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果我理解正確,您希望一次從文件中加載50個(gè)DIV元素。為此,我們需要跟蹤已加載的項(xiàng)目數(shù),然后在加載/附加到文檔之前過濾HTML。child.html
我們想要?jiǎng)?chuàng)建一個(gè)流程/狀態(tài)圖來了解需要什么。
初始負(fù)載
使用子元素中的前 50 個(gè)項(xiàng)目填充元素.html
parent
用戶閱讀內(nèi)容,向下滾動(dòng)頁面
用戶達(dá)到文檔高度的 70%
請求接下來的 50 個(gè)元素
將下一個(gè)結(jié)果集追加到
parent
注意:最好使用服務(wù)器端腳本,如PHP,它可以以塊的形式提供數(shù)據(jù)。
據(jù)我所知,它是靜態(tài)的,包含N個(gè)元素。腳本/j查詢無法加載特定數(shù)量的項(xiàng)。每次都會(huì)加載整個(gè)文檔。使用 ,我們可以篩選特定的選擇器。child.html
.load()
與 不同的是,該方法允許我們指定要插入的遠(yuǎn)程文檔的一部分。這是通過 URL 參數(shù)的特殊語法實(shí)現(xiàn)的。如果字符串中包含一個(gè)或多個(gè)空格字符,則假定字符串中第一個(gè)空格后面的部分是確定要加載的內(nèi)容的 jQuery 選擇器。
.load()
$.get()
我認(rèn)為我們可以使用 ,如下所示::lt()
$(“#parent”).load(“子.html .row:lt(50)”);
這已被棄用:
從 jQuery 3.4 開始,偽類已被棄用。將其從選擇器中刪除,稍后使用 篩選結(jié)果。例如,可以替換為對 的調(diào)用。
:lt
.slice()
:lt(3)
.slice( 0, 3 )
這樣做,然后我們會(huì)恢復(fù)到這樣。$.get()
$.get("child.html", function(ht){ $("#parent").append($(ht).find(".row").slice(0,50)); });
這將工作但不是最佳的,因?yàn)?a >GET請求每次都會(huì)返回整個(gè)文檔。如果是這種情況,最好先加載整個(gè)文檔,然后在用戶向下滾動(dòng)時(shí)顯示更多項(xiàng)目。這違背了目的。
如果你想試試,這里有一個(gè)例子:
$(function() {
var count = 0;
function getNextSet(url, n) {
var ht;
$.get(url, function(data) {
var start = count;
count = count + n;
ht = $(data).find(".row").slice(start, count);
});
return ht;
}
$("#parent").append(getNextSet("child.html", 50));
$(document).scroll(function() {
if ($(window).scrollTop() >= ($(this).height() - $(window).height()) * 0.7) {
$("#parent").append(getNextSet("child.html", 50));
}
});
});
添加回答
舉報(bào)