JoJ*_*oJo 11 javascript ajax infinite-scroll
我正在制作一个无限滚动的网站.也就是说,当用户滚动到页面的底部时,新的内容块被附加到底部.它与Facebook非常相似.这是一个加载3页的例子:
_________
| |
| 0 |
|_________|
| |
| 1 |
|_________|
| |
| 2 |
|_________|
当用户点击最后一页上的内容时,我会将它们带到单独的详细信息页面.但是,如果用户点击回搜索结果页面,我没有他们以前位置的记忆,必须再次加载第0页.
_________
| |
| 0 |
|_________|
我知道一些老式的方法可以解决这个问题,但每个方法都有一些严重的问题:
每次加载新页面时我都可以更新URL.例如:www.website.com/page#2.当用户进入详细页面并返回时,URL会告诉我最后加载的页面,所以我为他加载:
_________
| |
| 2 |
|_________|
但这是糟糕的用户体验.仅加载第2页.用户无法向上滚动以查看较旧的内容.我不能只加载页面0,1和2,因为这会使服务器超载,因为后退按钮占网络流量的50%(Jacob Nielsen研究).
Cookie没有存储许多页面数据的存储容量.本地存储应该有足够的空间.一种想法是将所有加载的页面存储到本地存储中.当用户返回搜索结果时,我从本地存储加载而不是命中服务器.这种方法的问题在于我的大部分用户都使用不支持本地存储的浏览器(IE7).
考虑到您的问题的限制，我能想到的唯一合理的解决方案是缓存前一页的高度，然后在用户向上滚动时加载它们。这将填充您的向上滚动，并允许您在用户向上查找时触发加载。此外，如果您想要更奇特一点，我会尝试找出一种冻结滚动条的方法，以防止用户向上滚动超过上一个卸载的页面。这样他们就无法一次触发多个页面加载。