John Mueller scroll

Question

infini J'essaie de trouver défilement infini avec l'histoire et la pagination, tel que recommandé par google, https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html

Démo de John Mueller fait exactement ce que je veux, mais je ne peux pas comprendre comment/où les données sont en cours de chargement. J'ai copié la source de la page et js et css, mais bien sûr, la source est pour la "page" sur laquelle elle se trouve. Tout pointe juste vers le répertoire/items et la page n'est pas rechargée sur de nouvelles données, juste la zone de contenu est rafraîchie, donc je ne comprends pas.

Probablement juste être un noob, mais n'importe quel aperçu apprécié.

Answer 1

La page échantillon utilise un service disponible à http://scrollsample.appspot.com en utilisant l'URL complète http://scrollsample.appspot.com/items?page=2&type=json pour obtenir les données spécifiques paginés dans un type de retour de JSON.

Vous pouvez passer cette URL dans un navigateur et consulter les données brutes renvoyées par le service.

Le fait que la page Web soit également hébergée à la même URL de base est sans importance. Une fois que vous avez ajouté les paramètres en question, vous n'obtenez plus le "site Web" HTML. Au lieu de cela, vous obtenez une réponse de données formatée (dans ce cas JSON).

Answer 2

Les données sont en cours de chargement à partir « http://scrollsample.appspot.com/items?page=2&type=json » lorsque vous démarrez la page, la fonction primeCache() est appelée et peuplez « next_data_cache » var.

Lorsque vous scrrouillez la page, une autre fonction est appelée, cette fois est 'showFollowing()' qui obtient les données en faisant un getJSON et en transmettant des données à 'next_data_cache' var.

Answer 3

Je vois cela dans leur code:

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

Answer 4

Si vous « Afficher la source », vous verrez qu'ils reference a file of JavaScript

Dans ce fichier sont les fonctions qui mettent en œuvre la pagination. Par exemple, dans la fonction loadFollowing(), vous verrez un appel à $.getJSON() qui récupère les données JSON via AJAX. Il appelle ensuite une fonction showFollowing() qui ajoute le contenu (qui est entré dans les données JSON) à la page avec: $('div.listitempage:last').after(data.response);