使用服務器端分頁鏈接進行Ajax無限滾動

Question

我已經使用了一個jquery插件，該插件使用經典的服務器端分頁鏈接來創建“無限滾動”頁面。

http://infiniteajaxscroll.com

這個主意看起來不錯，但我很感興趣在此示例中發生的事情：

假設我想對每分鍾添加5-10項內容的頁面進行分頁。 我每頁顯示50個項目，每行顯示5個項目，最新顯示在頂部。 用戶進入該網站並加載了第一頁。 他在第一頁中閱讀了幾分鍾的信息。 在此期間，另外12個項目被添加到列表中。

當用戶向下滾動時，jquery插件將觸發並預加載頁面2。但是在此期間已添加了12個新項目，因此用戶最終獲得以下選項之一：

• 列表中的重復項目（第2頁現在包含第1頁中的12個項目）
• 如果插件設法了解重復項，則該插件可以刪除重復項，僅保留新項。

第一種情況是不可接受的，因此假設我們檢測到重復項並動態刪除它們。 在這種情況下，我的網格變得很丑陋，因為我每行列出5個項目，而通常的50個項目中卻刪除了12個項目。 因此，最后一頁包含38個項目，這意味着最后一行已滿。

不用說，如果我有一個真正活躍的網站，並且在閱讀期間添加了50個新項目，那么第二頁將注入零結果。

問題...是否有辦法解決上述副作用？

謝謝！

Answer 1

跟蹤您已加載到JS變量中的mostRecent和MinimumRecent提要項目的ID。

每當您提出請求時，都將這兩個ID發送到服務器。

• 如果您要加載的是最近的Feed項，請讓服務器返回ID <MinimumRecent的那些

• 如果您要加載更多最新的提要項，請讓服務器返回ID> mostRecent的那些。

• 根據服務器的響應更新變量。

更多實施細節：

如果未使用AJAX提取初始數據，則可以通過嵌入JS腳本輕松地初始化JS變量的值。 就像是

<script> 
    var infiniteScroll_ID = {
        mostRecent: <?=$ID_of_mostRecent ?>, 
        leastRecent = <?= $ID_of_leastRecent ?> 
    }
</script> `

否則，只需將它們初始化為+和-無限。