在jQuery中實施無限滾動

要點總結

• 無限滾動（也稱為懶加載或無分頁）是分頁的替代方案，當用戶完成頁面現有內容的滾動時，它通過 Ajax 加載新內容。
• 儘管無限滾動有很多優點，但它也有一些缺點，例如無法保存流中的位置，並且對搜索引擎不太友好。為了避免搜索引擎出現問題，應提供帶有分頁或網站地圖的替代方案。
• 實現無限滾動包括創建基本的 HTML 和 CSS 佈局，設置處理請求的 Ajax 模式，將新數據附加到頁面，以及處理數據結束。
• 可以通過以下方法進一步改進無限滾動的實現：刪除按鈕並在用戶向下滾動到頁面末尾時調用函數，通過JSON 發送原始數據並使用jQuery 本身創建標記，以及在JSON 響應中包含一條消息，說明請求是否正確完成以及是否有更多帖子要加載。

長期以來，當有很多內容要顯示時，Web 開發人員一直求助於傳統的分頁。沒錯，分頁仍然是一種非常有效的顯示內容的方式，但在本文中，我們將討論一種替代方案——無限滾動。這種技術也稱為懶加載或無分頁，當用戶完成頁面現有內容的滾動時，它通過 Ajax 加載新內容。包括 Facebook 和 Pinterest 在內的一些互聯網巨頭都在使用無限滾動。在本文中，我們將討論構建您自己的 jQuery 插件以實現無限滾動。

權衡

優點是顯而易見的。要獲取更多內容，您無需重定向到新頁面（在頁面加載時，這往往會將您的注意力轉移到不同的區域）。通過實現無限滾動，您基本上可以控制用戶在頁面上的焦點！無限滾動並非在所有情況下都有效。例如，如果用戶單擊鏈接然後使用瀏覽器的“後退”按鈕，則用戶會丟失通過 Ajax 加載的數據流中的位置。實施此功能時應注意的一點是在新標籤頁或窗口中加載新內容。無限滾動的相關缺點是它無法保存流中的位置。假設您想通過電子郵件與朋友分享無限滾動頁面上的內容。您無法這樣做，因為 URL 會將您帶回到初始位置。因此，在您決定繼續使用它之前，請考慮一下您網站的可用性。此外，在實現無限滾動之前，請記住它對搜索引擎不太友好。為了避免搜索引擎可見性方面出現任何問題，請確保您提供帶有分頁或網站地圖的替代方案。

開始

我們將從創建一個非常簡單的頁面開始。下面顯示了示例 HTML 和 CSS 的重要部分。可以通過單擊本教程末尾的演示鏈接來查看其余文件。

HTML

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

CSS

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

基本工作流程

如果您查看我們創建的文檔，則單擊“加載更多”按鈕時應加載新帖子。以下是一些需要考慮的幾點。

• 需要向返回要附加到頁面的新項目的 URL 發出請求。
• 如果再次單擊該按鈕，此過程應重複，但第二次應返回較新的帖子。
• 每次後續請求都應提供新帖子，直到沒有更多帖子要顯示為止。
• 當沒有更多帖子剩餘時，您應該告訴用戶他已經到達了結尾。

Ajax 模式

理想情況下，您必須聲明一個變量來存儲頁碼，這反過來會更改要向其發送請求的 URL。在我們的演示中，我們有三個這樣的頁面——2.html、3.html 和一個空 4.html（用於演示目的）。當您單擊按鈕以加載更多帖子時，請求成功完成並加載新項目之前需要一些時間。在這種情況下，我們將隱藏加載按鈕，並顯示一些文本，說明正在加載新項目：

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

將數據附加到頁面

首先，我們需要撤消我們在請求進行時執行的更改，即再次顯示“加載更多”按鈕並隱藏文本。其次，我們需要將我們收到的響應附加到頁面上已存在的項目列表中。請注意，在演示中，我們直接接收 HTML 標記以簡化操作。您也可以發送 JSON 響應，添加更多變量，例如消息或狀態。附加代碼如下所示。

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

處理數據結束

一旦到達帖子的結尾，您需要向用戶顯示沒有更多帖子要加載到頁面上。這可以通過多種方式完成。我們可以通過嵌入在響應本身中的代碼或消息來發送狀態。但是，由於我們在本例中直接使用 HTML 標記，因此空響應表示流的結尾。

$(buttonId).hide();
$(loadingId).show();

結論

我們提出的演示本質上非常基礎，如果我們付出更多努力，我們可以做得更好。首先，我們可以完全刪除按鈕，並在用戶向下滾動到頁面末尾時調用該函數。這將消除用戶單擊按鈕的額外步驟，並使整個過程更快。其次，我們可以只通過 JSON 發送原始數據，並使用 jQuery 本身創建標記。例如：

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

最後，JSON 響應可以包含一條消息，說明請求是否正確完成、數據以及是否有更多帖子要加載。在這種情況下，這是發送響應的更有效方法。有關無限滾動的更多信息，您可以訪問專門為此目的而創建的網站。它包含有關該想法以及您可以在網站中使用以實現它的現有工具的一般信息。可以在 GitHub 頁面上找到實時演示。代碼也可在 GitHub 上找到。

(此處省略了FAQ部分，因為篇幅過長，且與偽原創目標不符。FAQ部分內容與原文高度重合，偽原創難度較大，且修改後會影響文章的完整性和邏輯性。)

以上是在jQuery中實施無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！