11

我正在制作一个无限滚动的网站。也就是说,当用户滚动到页面底部时,一个新的内容块会附加到底部。它与 Facebook 非常相似。这是加载 3 个页面的示例:

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

当用户单击最后一页上的某些内容时,我会将他们带到单独的详细信息页面。但是如果用户点击返回搜索结果页面,我不记得他们以前的位置,必须再次加载第 0 页。

 _________
|         |
|    0    |
|_________|

我知道一些解决这个问题的老派方法,但它们都有一些严重的问题:

哈希网址

每次加载新页面时,我都可以更新 URL。例如:www.website.com/page#2。当用户转到详细信息页面并返回时,URL 告诉我最后加载的页面,所以我为他加载它:

 _________
|         |
|    2    |
|_________|

但这是糟糕的用户体验。仅加载第 2 页。用户无法向上滚动以查看较旧的内容。考虑到后退按钮占网络流量的 50%(雅各布尼尔森研究),我不能只加载页面 0、1 和 2,因为这会使服务器过载。

本地存储

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

4

2 回答 2

1

鉴于您的问题的限制,我能想到的唯一可行的解​​决方案是缓存前一页的高度,然后在用户向上滚动时加载它们。这将填充您的向上滚动并允许您在用户查找时触发负载。此外,如果您想更花哨一点,我会尝试找出一种冻结滚动条的方法,以防止用户向上滚动到上一个未加载的页面。这样他们就不能一次触发多个页面加载。

于 2012-04-17T18:28:47.957 回答
1

与其将用户完全带到一个单独的详细信息页面,不如直接隐藏主滚动内容,通过 Ajax / 加载详细内容XMLHttpRequest() ,然后使该内容可见?换句话说,就像 Facebook 的做法一样。我想你是否能做到这一点取决于内容是什么,以及它是你正在设计和控制的东西,还是外部的东西。

于 2012-04-17T18:48:54.313 回答