约翰穆勒无限卷轴
我试图找出无限滚动历史和分页,如谷歌推荐, https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html
John Mueller的演示完全符合我的要求,但我无法弄清楚数据的加载方式/位置。 http://scrollsample.appspot.com/items
我复制了页面源代码和js和css,但当然源代码是针对特定的“页面”。 一切只是指向/ items目录,并且页面没有重新加载新数据,只刷新了内容区域,所以我没有得到它。
可能只是一个菜鸟,但任何洞察力都赞赏。
示例页面使用http://scrollsample.appspot.com
提供的服务,使用完整的URL http://scrollsample.appspot.com/items?page=2&type=json
来获取返回类型中分页的特定数据JSON。
您可以在浏览器中浏览该URL并查看从该服务返回的原始数据。
网页也托管在同一个基本url这一事实并不重要。 添加相关参数后,您将不再获得HTML“网站”。 而是获得格式化的数据响应(在本例中为JSON)。
如果您“查看源代码”,您将看到它们引用了JavaScript文件
在这个文件中是实现分页的function。 例如,在loadFollowing()
函数中,您将看到对$.getJSON()
的调用,该调用通过AJAX获取JSON数据。 然后它调用一个函数showFollowing()
,它将内容(包含在JSON数据中)添加到页面中: $('div.listitempage:last').after(data.response);
当您启动页面时,将从“ http://scrollsample.appspot.com/items?page=2&type=json ”加载数据,然后调用函数primeCache()并填充“next_data_cache”var。
当你scrool页面时,调用其他函数,这次是’showFollowing()’,他们获取数据执行getJSON并再次将数据传递给’next_data_cache’var。
我在他们的代码中看到了这个:
$.getJSON(next_data_url, function(data) { showFollowing(data); is_loading = 0; });