约翰穆勒无限卷轴

我试图找出无限滚动历史和分页,如谷歌推荐, 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; });