在jQuery中實現無限滾動

據我所知，當要顯示很多內容時，web開發人員已轉向老式的分頁。別誤會，分頁仍然是顯示內容的一種非常有效的方法，但是在本文中，我們將討論另一種選擇-無限滾動。當使用者完成頁面現有內容的滾動瀏覽時，這種技術（也稱為延遲滾動或不分頁）會通過ajax載入新內容。無限滾動被internet上的一些知名人士使用，包括facebook和pinterest。在本文中，我們將討論構建自己的jquery外掛程式以實現無限滾動。

無限滾動並非在所有情況下都有效。例如，如果使用者單擊鏈結，然後使用瀏覽器的「後退」按鈕，則該使用者將丟失其在通過ajax載入的資料流中的位置。實施此功能時的一項預防措施是在新的選項卡或視窗上載入新的內容。

無限滾動的乙個相關缺點是它無法儲存流中的位置。假設您想通過電子郵件與您的朋友在無限滾動頁面上共享某些內容。您無法執行此操作，因為url將您帶回到初始位置。因此，在決定繼續進行之前，請考慮一下**的可用性。

此外，在實施無限滾動之前，請記住，它並不是非常友好的搜尋引擎。為了避免有關搜尋引擎可見性的任何問題，請確保提供分頁或站點地圖的替代方法。

我們將從布局乙個非常簡單的頁面開始。示例html和css的重要部分如下所示。通過單擊本教程末尾的演示鏈結，可以檢視其餘檔案。

的html

hi! i am the first item. hi! i am the second item. hi! i am the third item. ok, this is getting boring. let's try something new. how about loading some more items through ajax? click the button below to load more items. load more items loading more items

的css

#data-container #data-container .data-item #loading-div

#button-more

如果您檢視我們建立的文件，則在單擊「載入更多」按鈕時應載入新的帖子。這裡有幾點要考慮。

理想情況下，您必須宣告乙個變數來儲存頁碼，該變數反過來會更改將請求傳送到的url。在我們的演示中，我們有三個這樣的頁面–2.html，3.html和乙個空4.html用於演示。

$(buttonid).hide();
$(loadingid).show();

首先，我們需要撤消在請求進行過程中執行的更改，即再次顯示「載入更多」按鈕並隱藏文字。其次，我們需要將收到的響應附加到頁面上已經存在的專案列表中。請注意，在演示中，我們直接接收html標記以使事情簡單。您也可以傳送json響應，新增更多變數，例如訊息或狀態。附加**如下所示。

$(buttonid).show();
$(loadingid).hide();
page += 1;

到達帖子末尾後，您需要向使用者顯示該頁面上沒有更多帖子可載入。這可以通過許多方式來完成。我們可以通過響應本身內嵌的**或訊息來傳送狀態。但是，由於在此示例中直接使用html標記，因此空響應會標記流的結尾。

$.ajax(
// do something if the response is right.
},...});

我們提出的演示本質上是非常基本的，如果付出更多努力，我們可以做得更好。首先，我們可以完全刪除按鈕，並在使用者向下滾動到頁面末尾時呼叫該函式。這將消除使用者單擊按鈕的額外步驟，並使整個過程更快。其次，我們可以通過json傳送原始資料，並使用jquery本身建立標記。例如：

$.each(response.items, function(index, value) );
});

最後，json響應可能包含一條訊息，指出請求是否正確執行，資料以及是否有更多要載入的帖子。在這種情況下，這是傳送響應的更有效方式。

有關無限滾動的更多資訊，您可以訪問此原因專用** 。它包含有關該構想的常規資訊以及可用於在**中實現該構想的現有工具。

實時演示可在github頁面上找到。該**在github上也可用。

from:

在jQuery中實現無限滾動

Cocos Creator 實現背景無限滾動效果

在easyui中實現datagrid滾動條聯動

利用js實現列表向上無限滾動

在jQuery中實現無限滾動

Cocos Creator 實現背景無限滾動效果

在easyui中實現datagrid滾動條聯動

利用js實現列表向上無限滾動

相關推薦