使用服务器端分页链接进行ajax无限滚动

Question

我已经找到了一个jquery插件，它使用经典的服务器端分页链接来创建＆＃34;无限滚动＆＃34;页。

http://infiniteajaxscroll.com

这个想法看起来不错，但是我感兴趣的是这个例子中发生了什么：

说我想分页一个相当活跃的页面，每分钟添加5-10个项目。我每页显示50个项目，每行显示5个项目，顶部显示最新项目。用户进入网站并加载第一页。他在第一页读取信息几分钟。在此期间，另外12个项目被添加到列表中。

当用户向下滚动时，jquery插件会触发并预加载第2页。但在此期间添加了12个新项目，因此用户最终会选择以下一个选项：

• 列表中的重复项目（第2页现在包含第1页的12个项目）
• 如果插件设法理解项目是重复的，则插件可能会删除重复项并仅保留新项目。

第一种情况是不可接受的，所以让我们假设我们检测到重复并动态删除它们。在这种情况下，我的网格变得丑陋，因为我列出了每行中的5个项目，并且12个刚刚从50个项目的常规Feed中删除。所以最后一页包含38个项目，这意味着最后一行是半满的。

毋庸置疑，如果我有一个非常活跃的网站，并且在阅读期间添加了50个新项目，那么第二页将注入零结果。

问题是......有办法解决上述副作用吗？

谢谢！

Answer 1

跟踪您在JS变量中加载的mostRecent和leastRecent Feed项的ID。

每当您发出请求时，请将这两个ID发送到服务器。

• 如果您要加载较少的近期Feed项，请让服务器返回ID为＆lt; leastRecent

• 如果您要加载更新的Feed项，请让服务器返回ID为＆gt; mostRecent

• 根据服务器的响应更新变量。

更多实施细节：

如果未使用AJAX获取初始数据，则可以通过嵌入JS脚本轻松初始化JS变量的值。

之类的东西

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

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