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.

Solution 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).

Solution 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);

Solution 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.

Solution 4:

I see this in their code:

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