0
所以我試圖通過從服務器獲取所需的項目來實現使用jQuery的懶惰滾動。所以這就是我如何做到的。Lazy scrolling jquery
- 檢測頁面的結尾，進行服務器調用，檢索N個以上的項目。
- 然後清除div加載項目並將scrollTop設置爲div頂部。
- 當用戶想要再次閱讀先前的列表時，再次進行服務器調用以檢索項目。
以下是簡要代碼。
if ((scrollHeight - scrollPosition)/scrollHeight === 0)
{
//end of the page,scrolling down retrieve N more listings
doRequest("down");
}
if(jQuery(window).scrollTop() == 0)
{
//top of the page,scrolling up
doRequest("up");
}
});
function doRequest(scroll_dir)
{
if(scroll_dir == "down")
{
if(jQuery("#detail").length)
listing_id = jQuery("#detail input").last().val();
}
else if(scroll_dir == "up")
{
if(jQuery("#detail").length)
listing_id = jQuery("#detail input").first().val();
}
jQuery.ajax({
type: "GET",
url: url,
data: {params:params,start:listing_id,scroll_direction:scroll_dir},
success: function(results)
{
if(results.length > 0)
{
jQuery('#detail').html("");
}
//load the results
//append to div,jQuery('#detail').append(data);
//code skipped for brevity
scrollTop = jQuery("#detail").offset().top;
jQuery(window).scrollTop(scrollTop);
} ,
});
}
所以我有一個後端控制器，它採用滾動方向的列表ID並返回結果。
所以向下滾動發生的很好，但是當我向上滾動時，需要檢測這個點來進行服務器調用，以便從N-1到N-10列表中檢索。但是我發現它很難需要撥打電話jQuery(window).scrollTop() == 0不適用於手機嗎？
任何已經這樣做的圖書館？任何幫助將是有益的。謝謝。
您的延遲加載邏輯存在一個主要缺陷。從步驟2開始，清除當前視圖中的現有項目並加載新項目是一個糟糕的主意，因爲當您像案例一樣向上滾動時，可能需要再次加載它們。**更好的解決方案：**您只需將新項目添加到現有項目列表中，以便在滾動時不會再次加載相同的項目，並且它還可以提高您的網站性能，因爲您只需加載一次項目即可沒有時間頁面上下滾動 – dreamweiver
@dreamweiver感謝您的建議現在工作正常。 – Varun
現在我們應該關閉這個問題嗎？ – dreamweiver