使用服务器端分页链接进行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> `

否则，只需将它们初始化为+和-无限。