John Mueller infinite scroll

问题

I'm trying to figure out infinite scroll with history and pagination, as recommended by google, https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html

John Mueller's demo does exactly what I want, but I can't figure out how/where the data is being loaded. http://scrollsample.appspot.com/items

I copied page source and js and css, but of course the source is for the particular "page" it happens to be on. Everything just points to the /items directory and the page isn't being reloaded on new data, just the content area refreshed, so I don't get it.

Probably just being a noob, but any insight appreciated.

回答1:

The sample page makes use of a service available at http://scrollsample.appspot.com using the complete URL http://scrollsample.appspot.com/items?page=2&type=json to get the specific data paginated in a return type of JSON.

You can past that url in a browser and see the raw data that is returned from the service.

The fact that the webpage is also hosted at the same base url is immaterial. Once you add the parameters in question, you no longer get the HTML "website". Instead you get a formatted data response (in this case JSON).

回答2:

If you "View Source" you will see that they reference a file of JavaScript

In this file are the functions which implement the pagination. For example, in the loadFollowing() function you will see a call to $.getJSON() which fetches JSON data via AJAX. It then calls a function showFollowing() which adds the content (which came in the JSON data) to the page with: $('div.listitempage:last').after(data.response);

回答3:

The data is being loaded from 'http://scrollsample.appspot.com/items?page=2&type=json' when you start the page, then the function primeCache() is called and populate 'next_data_cache' var.

When you scrool the page, other function is called, this time is 'showFollowing()' who get the data doing a getJSON and passing data again to 'next_data_cache' var.

回答4:

I see this in their code:

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

来源：https://stackoverflow.com/questions/34884671/john-mueller-infinite-scroll

标签

javascript

jquery

infinite