Comment les sites Web d'actualités, par exemple Forbes / Zdnet, fusionnent-ils de manière transparente une page Web dans une autre?

14

Si vous allez à Eg:

Lorsque vous arrivez au bas de la page, une nouvelle histoire se charge et l'URL de mon navigateur Internet devient l'URL de cette nouvelle histoire. Je me demandais donc comment une page Web peut charger presque instantanément la page Web suivante avec un délai presque négligeable entre les pages. Par exemple, sont-ils en train de pré-télécharger la page Web de l'article Next News, puis de charger la page Web très rapidement?

javascript web-development web-applications html websites zordman
la source
1
Appuyez et maintenez la Endtouche et vous verrez le délai de chargement.
MonkeyZeus
5
La question la plus importante est pourquoi le font-ils.

Réponses:

25

La réponse courte est que le code Javascript côté client de la page détecte lorsque vous vous approchez «trop près» du bas de la page et demande au serveur plus de données lorsque cela se produit.

Sans devenir trop technique, ils ne rechargent pas la page Web entière. Au lieu de cela, le code Javascript sur cette page demande plus de données au serveur, puis lorsqu'il reçoit les nouvelles données, il ajoute ces données à la page actuelle. Les parties de la page qui n'ont pas besoin d'être modifiées restent totalement inchangées.

La façon la plus moderne de le faire est d'utiliser les fonctionnalités de modification de l'historique HTML5 , qui semblent être ce que ces sites utilisent.

Ixrec
la source
4
Il manque une étape à votre description: où ils modifient réellement l'historique, ainsi que l'ajout de données à la page. Ce qui rend votre «façon la plus moderne de faire cela » un peu gênant, car cela fait référence au processus de modification de l'historique, qui n'est pas réellement mentionné dans la réponse. (Grammaticalement, cela reviendrait à laisser le reste de la page inchangé, ou peut-être à ajouter des données à la page, ce qui est généralement fait avec AJAX, et ne peut pas être fait avec les fonctionnalités de modification d'historique HTML5.)
KRyan
Alors qu'en est-il du changement d'URL, comment cela se fait-il sans forcer un rechargement? Parce que sur votre lien, si vous rechargez une «page modifiée» (par exemple /second), cela génère des erreurs. Cela ne se produit pas avec le site d'actualités d'OP - ils modifient l'URL précisément afin que vous puissiez le partager.
OJFord
@OllieFord, c'est à cela que sert l'API historique. history.pushStateet history.replaceStatevous permet de modifier l'URL dans la barre d'adresse sans quitter la page actuelle. C'est le remplacement plus moderne de l'ancienne astuce consistant à changer le fragment d'URL ( #something), avec un gros avantage étant que l'API d'historique vous permet de pousser les URL "réelles" que le serveur peut participer à la génération, tandis que le fragment doit être pris en charge complètement du côté client.
hobbs
Ah ok. Mais comme je l'ai dit, la démo est cassée, ce qui prête à confusion.
OJFord
Pour une raison quelconque, la démo historique que je connaissais était complètement rompue lorsque cette question est apparue, donc ce lien a été le premier que j'ai pu trouver qui semblait fonctionner. N'hésitez pas à suggérer un meilleur lien.
Ixrec
20

Une grande clé pour comprendre ce qui se passe: Il est possible, via Javascript, de définir l'URL dans la barre d'adresse sans rediriger l'utilisateur. Pour voir cela en action, collez le code ci-dessous dans la console d'un navigateur pris en charge. Notez qu'il change votre barre d'adresse en http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

L'avantage de cette approche est que si les signets de l'utilisateur après avoir défilé vers une histoire, le signet saura où envoyer l'utilisateur. Le défilement infini des résultats de recherche par DeviantArt est un bel exemple de ce comportement.

Brian
la source
Attendez, DeviantArt a implémenté une modification de l'historique dans ses résultats de recherche, vous pouvez donc réellement créer un lien vers / mettre en signet / sinon enregistrer une page particulière? C'est ... tout à fait quelque chose. Cependant, combien de temps des résultats particuliers resteraient-ils sur une page particulière pour une requête particulière? Si vous marquez un signet, je ne m'attendrais pas à voir les mêmes résultats sur cette page particulière demain ... Je dois me rappeler d'enquêter.
KRyan
@KRyan, il modifie simplement le offsetparamètre qui saute une certaine distance dans le jeu de résultats. Étant donné que l'ordre de tri par défaut semble être "populaire en tout temps", les résultats sont probablement quelque peu stables, mais certainement pas si vous passez l'ordre de tri sur "plus récent" et recherchez quelque chose de populaire.
hobbs