Wie verschmelzen Nachrichtenwebsites wie Forbes / Zdnet nahtlos eine Webseite mit einer anderen?

14

Wenn Sie zB gehen:

Wenn Sie am Ende der Seite angelangt sind, wird ein neuer Nachrichtenartikel geladen und die URL in meinem Internetbrowser ändert sich in die URL dieses nächsten Nachrichtenartikels. Also habe ich mich gefragt, wie eine Webseite die nächste Webseite fast sofort mit einer fast vernachlässigbaren Verzögerung zwischen den Seiten laden kann. Laden sie zum Beispiel die Webseite der Next News Story vor und laden sie die Webseite dann wirklich schnell?

javascript web-development web-applications html websites zordman
quelle
1
Wenn Sie die EndTaste gedrückt halten , wird die Verzögerung des Ladevorgangs angezeigt.
MonkeyZeus
5
Die wichtigere Frage ist, warum sie es tun.

Antworten:

25

Die kurze Antwort ist, dass der clientseitige Javascript-Code der Seite erkennt, wenn Sie sich dem unteren Rand der Seite "zu nah" befinden, und den Server in diesem Fall nach weiteren Daten fragt.

Ohne zu technisch zu werden, wird nicht die gesamte Webseite neu geladen. Stattdessen fordert der Javascript-Code auf dieser Seite weitere Daten vom Server an. Wenn er die neuen Daten empfängt, fügt er diese Daten der aktuellen Seite hinzu. Die Teile der Seite, die nicht geändert werden müssen, bleiben vollständig unverändert.

Die modernste Methode hierfür ist die Verwendung der HTML5-Funktionen zur Änderung des Verlaufs , die anscheinend von diesen Websites verwendet werden.

Ixrec
quelle
4
Ihrer Beschreibung fehlt ein Schritt: Sie ändern den Verlauf und fügen der Seite weitere Daten hinzu. Das macht Ihre „modernste Art, dies zu tun “ etwas umständlich, denn dies bezieht sich auf den Prozess der Änderung der Historie, der in der Antwort eigentlich nicht erwähnt wird. (Grammatisch diese zu verlassen , den Rest der Seite unverändert beziehen würden, oder vielleicht Daten an der Seite zu geben, die in der Regel mit AJAX geschehen ist, und kann nicht mit den HTML5 - Geschichte-Modifikation Funktionen durchgeführt werden.)
KRyan
Wie sieht es mit der URL-Änderung aus, ohne dass ein Reload erzwungen wird? Wenn Sie in Ihrem Link eine 'geänderte Seite' neu laden (z. B. /second), tritt ein Fehler auf. Bei der News-Site von OP ist das nicht der Fall - sie ändern die URL genau, damit Sie sie teilen können.
OJFord
@OllieFord, dafür ist das History-API gedacht. history.pushStateund history.replaceStatelassen Sie die URL in der Adressleiste ändern, ohne von der aktuellen Seite weg zu navigieren. Es ist der modernere Ersatz für den älteren Trick, das URL-Fragment ( #something) zu ändern. Ein großer Vorteil ist, dass Sie mit der Verlaufs-API "echte" URLs übertragen können, an deren Generierung der Server teilnehmen kann, während das Fragment vollständig unterstützt werden muss von der Client-Seite.
Hobbs
Ah okay. Aber wie gesagt, die Demo ist kaputt, was verwirrend ist.
OJFord
Aus irgendeinem Grund war die mir vertraute Geschichtsdemo völlig kaputt, als diese Frage auftauchte, sodass dieser Link der erste war, den ich finden konnte, der überhaupt zu funktionieren schien. Fühlen Sie sich frei, einen besseren Link vorzuschlagen.
Ixrec
20

Ein wichtiger Schlüssel zum Verständnis des Geschehens: Es ist möglich, über Javascript die URL in der Adressleiste festzulegen, ohne den Benutzer tatsächlich umzuleiten. Fügen Sie den folgenden Code in die Konsole eines unterstützten Browsers ein, um dies in Aktion zu sehen. Beachten Sie, dass sich Ihre Adressleiste in ändert http://programmers.stackexchange.com/yay.html.

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

Der Vorteil dieses Ansatzes besteht darin, dass das Lesezeichen weiß, wohin es den Benutzer senden soll, wenn der Benutzer nach dem Scrollen zu einer Story ein Lesezeichen erstellt. Das unendliche Scrollen der Suchergebnisse in DeviantArt ist ein gutes Beispiel für dieses Verhalten.

Brian
quelle
Warten Sie, DeviantArt hat eine Verlaufsänderung in den Suchergebnissen implementiert, damit Sie tatsächlich eine bestimmte Seite mit / bookmark / else record verknüpfen können. Das ist ... ziemlich viel. Wie lange bleiben bestimmte Ergebnisse auf einer bestimmten Seite für eine bestimmte Abfrage? Wenn Sie ein Lesezeichen setzen, würde ich nicht erwarten, dass morgen auf dieser bestimmten Seite dieselben Ergebnisse zu sehen sind ... Ich muss daran denken, dies zu untersuchen.
KRyan,
@KRyan ändert nur den offsetParameter, der eine bestimmte Distanz in die Ergebnismenge überspringt. Da die Standardsortierreihenfolge "immer beliebt" zu sein scheint, sind die Ergebnisse wahrscheinlich etwas stabil, aber definitiv nicht, wenn Sie die Sortierreihenfolge auf "am neuesten" ändern und nach etwas Populärem suchen.
Hobbs