Question

我正在尝试根据谷歌的推荐，找出具有历史和分页的无限滚动， https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html

John Mueller的演示完全符合我的要求，但我无法弄清楚数据的加载方式/位置。 http://scrollsample.appspot.com/items

我复制了页面源代码和js和css，但当然源代码是针对特定的“页面”。一切都只是指向/ items目录，并且页面没有重新加载到新数据上，只是刷新了内容区域，所以我没有得到它。

可能只是一个菜鸟，但任何见解都很受欢迎。

Answer 1

示例页面使用完整URL http://scrollsample.appspot.com在http://scrollsample.appspot.com/items?page=2&type=json处可用的服务来获取以JSON的返回类型分页的特定数据。

您可以在浏览器中浏览该网址，并查看从该服务返回的原始数据。

网页也托管在同一个基本网址这一事实并不重要。添加相关参数后，您将不再获得HTML“网站”。而是获得格式化的数据响应（在本例中为JSON）。

Answer 2

如果您“查看来源”，您会看到他们reference a file of JavaScript

在此文件中是实现分页的功能。例如，在loadFollowing()函数中，您将看到对$.getJSON()的调用，该调用通过AJAX获取JSON数据。然后它调用一个函数showFollowing()，它将内容（包含在JSON数据中）添加到页面中：$('div.listitempage:last').after(data.response);

Answer 3

正在加载数据 'http://scrollsample.appspot.com/items?page=2&type=json' 当你启动页面时，调用函数primeCache（）并填充'next_data_cache'var。

当你scrool页面时，调用其他函数，这次是'showFollowing（）'，他们获取数据执行getJSON并再次将数据传递给'next_data_cache'var。

Answer 4

我在他们的代码中看到了这一点：

$.getJSON(next_data_url, function(data) {
    showFollowing(data);
    is_loading = 0;
});

约翰穆勒无限卷轴

4 个答案: