Diese Frage klingt vielleicht komisch, weil die Popstate in den meisten Fällen synchron ausgelöst werden, wenn Benutzer die Zurück-Taste drücken.So behandeln Sie die Schaltfläche "Zurück", wenn der Browser nicht ausgelöst wird Popstate-Ereignis sofort
Die W3C-Spezifikation besagt jedoch, dass ein UA (Browser) den Popstate-Status quittieren darf, wenn traversing history (siehe Punkt 14), d. popstate
wird asynchron ausgelöst (obwohl die URL zu diesem Zeitpunkt geändert wurde).
Browser-Anbieter interpretieren und implementieren diese Spezifikation anders. Mozilla decides Firefox sollte popstate
vor load
auslösen können, und aus guten Gründen, so dass langsame Bilder popstate
nicht blockieren werden.
Chrome/Safari anders entscheidet, und es führt unser Problem:
Wenn die Geschichte für einen Web-App verwalten, ist es oft wünschenswert ist, so schnell wie möglich Geschichte Managements, zu kick off, zum Beispiel. unter DOMContentLoaded
anstelle von load
. Aber im Gegenzug können Benutzer keine pushState
zurücksetzen, da alle popstate
bis load
eingereiht sind.
Wir suchen Ratschläge für Möglichkeiten, mit solchen Szenarien umzugehen. Ich habe ein paar selbst:
- Lazyload Bilder, so
load
kann so schnell wie möglich feuern. - Block UI bis
load
wird gefeuert. - Init-Rahmen auf
load
anstelle vonDOMContentLoaded
.
Gibt es bessere Lösungen?
aktualisieren: Dinge hässlich, wenn Ajax sind, dass Feuer vor load
, wenn diese Anforderung Ergebnis in DOM ändern und DOM Änderung einige Bilder haben, geschieht, load
werden, bis diese Bilder/timeout geladen verzögert wird, was bedeutet, popstate
ist noch länger in der Warteschlange.
Update 2: Um eine einfache Demo für sie hinzufügen, um diesen jsbin page mit Chrom besuchen und sehen popstate
bis load
abgefeuert wird gesperrt. Sie können das Ergebnis zwischen dem zwischengespeicherten Bild und dem nicht zwischengespeicherten Bild vergleichen.
Bei Verwendung der Zurück-Taste sollte 'popstate' immer sofort ausgelöst werden. Der einzige Fall, in dem es nicht ausgelöst wird, ist beim Aktualisieren, aber in diesem Fall sollten Sie sich am besten auf die URI stützen (das ist der Punkt einer Aktualisierung). Ich muss etwas vermissen, aber nicht sicher was. –
@DavidMulder Ich habe eine jsbin Seite hinzugefügt, um das Problem zu demonstrieren. – bitinn
Ah, zumindest bekomme ich jetzt, dass du einen History-State-Wechsel feuere, bevor das "Laden" passiert ist ... Warum machst du das in der Welt?Nur ein Benutzer sollte den Status ändern und das erste Mal, wenn die App die Zurück-Schaltfläche lädt, sollten keine vorherigen anwendungsspezifischen Zustände aufweisen. Daher bin ich völlig verwirrt, was Sie zu tun versuchen. –