Ich versuche, einen einfachen Ladespinner zu erstellen, der beim Navigieren auftaucht. Es wird beim Navigieren mit einem 'beforeunload'-Ereignis angezeigt und verwendet das' load'-Ereignis, um sich nach Abschluss des Vorgangs wieder auszublenden.
Das Problem ist, dass, wenn ich die Seite für einige Stunden im Hintergrund auf meinem Telefon lasse, das Ereignis "Vor dem Entladen" den Spinner auslöst und anzeigt. Wahrscheinlich, weil Chrome unter Android die Seite teilweise entlädt, um Speicherplatz zu sparen. Der Spinner verschwindet jedoch nicht von alleine und ich kann nicht herausfinden, wie ich ihn auf elegante Weise wieder verschwinden lassen kann.
Gibt es ein anderes Ereignis, das ich stattdessen verwenden sollte?
window.addEventListener("load", function() {
topSpinner.classList.add("closed");
});
window.addEventListener("beforeunload", function() {
topSpinner.classList.remove("closed");
});
javascript
android
google-chrome
Doskii
quelle
quelle
Antworten:
Chrome 68 (Juli 2018) hat eine neue Page Lifecycle-API eingeführt : Das in diesem Link bereitgestellte Statusdiagramm zeigt nicht den Systemaufruf (Browser),
beforeunload
bevor die Seite in denfrozen
Status versetzt wird, aber genau das passiert.Hilfreicherweise hat die API zwei neue Ereignisse eingeführt, die ausgelöst werden, wenn die Seite diesen Status ein- und verlässt:
freeze
undresume
.Ich habe dieses Problem sowohl auf mobilen Chrome- als auch auf Webview-Displays gelöst, indem ich Folgendes hinzugefügt habe:
quelle
Ändern Sie den Listener für Ladeereignisse in den Fokus
quelle
Ich habe Ereignisse über Ajax in der Datenbank protokolliert. Meine Tests haben gezeigt, dass es nicht vorhersehbar ist, welche Ereignisse ausgelöst wurden (dh bei Verwendung von PWA). Es gibt
focus
,visibilitychange
,resize
undbeforeunload
beteiligt. Ich war überrascht, als ich den Bildschirm mit aktivem PWA einschaltete. Manchmalbeforeunload
sind dies die einzigen Ereignisse, die in der Datenbank protokolliert wurden.Ich verwende jetzt den folgenden Code, der ohne Nebenwirkungen zu funktionieren scheint:
quelle
Versuchen Sie, ein Loader-Flag über
localStorage
beizubehalten. Wenn die Seite dann neu geladen wird, überprüfen Sie das Flag erneut:Pseudocode unten:
quelle
setTimeout
nachx
Sekunden entfernt wird. Im schlimmsten Fall müssen Sie alsox
Sekunden warten, bis die Seite wieder angezeigt wird. Darüber hinaus ist die Verwendung eines Timers, der für diesen Sonderfall ständig läuft, nicht wirklich innovativ.