约翰穆勒无限卷轴

Question

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

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

我复制了页面源代码和 js 以及 css，但当然源代码是针对特定的 "page" 它恰好在。一切都指向 /items 目录，页面没有根据新数据重新加载，只是刷新了内容区域，所以我不明白。

可能只是一个菜鸟，但任何见解都值得赞赏。

Answer 1

正在从中加载数据 'http://scrollsample.appspot.com/items?page=2&type=json' 当您启动页面时，将调用函数 primeCache() 并填充 'next_data_cache' var.

当你滚动页面时，其他函数被调用，这次是 'showFollowing()' 获取数据的人执行 getJSON 并将数据再次传递给 'next_data_cache' var.

Answer 2

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

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

Answer 3

示例页面使用 http://scrollsample.appspot.com 上可用的服务，使用完整的 URL http://scrollsample.appspot.com/items?page=2&type=json 获取以 return 类型 [=] 分页的特定数据20=].

您可以在浏览器中输入 url 并查看从该服务 return 编辑的原始数据。

该网页也托管在同一基地 url 这一事实无关紧要。添加有问题的参数后，您将不再获得 HTML "website"。相反，您会得到格式化的数据响应（在本例中为 JSON）。

Answer 4

如果你"View Source"你会看到他们reference a file of JavaScript

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

约翰穆勒无限卷轴

John Mueller infinite scroll

javascript

jquery

infinite