当用户离开页面时，如何保存无限堆栈的AJAX内容？

Question

11

我正在制作一个具有无限滚动的网站。也就是说，当用户向页面底部滚动时，新的内容块将被追加到页面底部。这与Facebook非常相似。以下是加载了3页的示例：

 _________
|         |
|    0    |
|_________|
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|

当用户在最后一页上点击某个东西时，我会将他们带到一个单独的详细信息页面。但是，如果用户返回到搜索结果页面，则我没有记住他们之前的位置，必须重新加载第0页。

 _________
|         |
|    0    |
|_________|

我知道一些老派的方法来解决这个问题，但它们各自都有一些严重的问题：

哈希URL

我可以在每次加载新页面时更新URL。例如：www.website.com/page#2。当用户进入详细页面并返回时，URL会告诉我最后加载的页面，因此我会为他重新加载该页面：

 _________
|         |
|    2    |
|_________|

但这会导致用户体验较差。只有第2页被加载，用户无法向上滚动查看旧内容。我不能只加载0、1、2页，因为那样会使服务器超负荷运行，考虑到返回按钮占据了50%的网络流量（Jacob Nielsen的研究）。

Cookie 的存储容量不足以存储许多页面数据。本地存储(Local Storage) 应该有足够的空间。一种想法是将所有加载的页面存储在本地存储中。当用户回到搜索结果时，我可以从本地存储中加载，而不是访问服务器。但这种方法的问题是我的大部分用户使用的浏览器不支持本地存储（IE7）。

- JoJo

为什么一次性加载所有显示的页面会使服务器超载，而逐个请求却不会呢？ - Tejs

2

具有无限内存。 - Phrogz

1

@Tejs：我的表达不太准确。我是指一次性加载一百个页面对用户来说很慢，而且会给服务器带来不必要的负担。 - JoJo

2个回答

1

考虑到您的问题限制，我能想到的唯一合理的解决方案是缓存之前页面的高度，然后在用户向上滚动时加载它们。这将填充您的向上滚动并允许您在用户查看上方时触发加载。此外，如果您想要更加高级一些，我建议尝试找出一种方法来冻结滚动条，以防止用户向上滚动超过之前未加载的页面。这样他们就无法同时触发多个页面加载。

- Spencer Ruport

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trevor · Accepted Answer

不要将用户带到完全分开的详细信息页面，为什么不只隐藏主滚动内容，通过Ajax / XMLHttpRequest()加载详细内容，然后使该内容可见呢？换句话说，就像Facebook所做的那样。我想这取决于内容是什么以及它是否是您正在设计和控制的东西，还是外部内容。