Seite: DOMContentLoaded, load, beforeunload, unload

Der Lebenszyklus einer HTML-Seite weist drei wichtige Ereignisse auf:

• DOMContentLoaded – Der Browser hat HTML vollständig geladen, und der DOM-Baum wird erstellt, aber externe Ressourcen wie Bilder <img> und Stylesheets wurden möglicherweise noch nicht geladen.
• load – nicht nur HTML wird geladen, sondern auch alle externen Ressourcen: Bilder, Stile usw.
• beforeunload/unload – the Der Benutzer verlässt die Seite.

Jedes Ereignis kann nützlich sein:

• DOMContentLoaded Ereignis – DOM ist bereit Damit der Handler nach DOM-Knoten suchen und die Schnittstelle initialisieren kann.
• load Ereignis – externe Ressourcen werden geladen, Stile werden angewendet, Bildgrößen sind bekannt usw.
• beforeunload Ereignis – Der Benutzer verlässt das Programm: Wir können überprüfen, ob der Benutzer die Änderungen gespeichert hat, und ihn fragen, ob er sie wirklich verlassen möchte.
• – Der Benutzer ist fast gegangen, aber wir können noch einige Vorgänge einleiten, z. B. das Versenden von Statistiken.

Lassen Sie uns die Details dieser Ereignisse untersuchen.

DOMContentLoaded

Das Ereignis DOMContentLoaded tritt für das Objekt document auf.

We muss addEventListener verwenden, um es abzufangen:

Zum Beispiel:

Im Beispiel wird der Handler DOMContentLoaded ausgeführt, wenn das Dokument geladen wird, sodass alle Elemente angezeigt werden können. einschließlich <img> unten.

Es wird jedoch nicht darauf gewartet, dass das Bild geladen wird. alert zeigt also Nullgrößen an.

Auf den ersten Blick ist das Ereignis DOMContentLoaded sehr einfach. Der DOM-Baum ist fertig – hier ist das Ereignis. Es gibt jedoch nur wenige Besonderheiten.

DOMContentLoaded und Skripte

Wenn der Browser ein HTML-Dokument verarbeitet und auf ein <script> -Tag stößt, wird es angezeigt muss ausgeführt werden, bevor mit dem Erstellen des DOM fortgefahren wird. Dies ist eine Vorsichtsmaßnahme, da Skripte möglicherweise DOM und sogar document.write ändern möchten, sodass DOMContentLoaded warten muss.

DOMContentLoaded passiert also definitiv nach solchen Skripten:

Im obigen Beispiel sehen wir zuerst „Bibliothek geladen …“ und dann „DOM bereit!“ (Alle Skripte werden ausgeführt.)

DOMContentLoaded und Stile

Externe Stylesheets wirken sich nicht auf DOM aus, sodass DOMContentLoaded nicht auf sie wartet.

Aber es gibt sie eine Falle. Wenn wir nach dem Stil ein Skript haben, muss dieses Skript warten, bis das Stylesheet geladen wird:

Der Grund dafür ist, dass das Skript möglicherweise Koordinaten und andere stilabhängige Eigenschaften von Elementen wie in abrufen möchte das obige Beispiel. Natürlich muss es warten, bis Stile geladen sind.

Da DOMContentLoaded auf Skripte wartet, wartet es jetzt auch auf Stile vor ihnen.

Integriertes Ausfüllen von Browsern

Formulare zum automatischen Ausfüllen von Firefox, Chrome und Opera auf DOMContentLoaded.

Wenn die Seite beispielsweise eine hat Formular mit Login und Passwort, und der Browser hat sich die Werte merkt. Bei DOMContentLoaded wird möglicherweise versucht, sie automatisch auszufüllen (sofern vom Benutzer genehmigt).

Also wenn DOMContentLoaded wird durch lang geladene Skripte verschoben, dann wartet auch das automatische Ausfüllen. Sie haben wahrscheinlich gesehen, dass auf einigen Websites (wenn Sie das automatische Ausfüllen des Browsers verwenden) die Anmelde- / Kennwortfelder nicht sofort automatisch ausgefüllt werden, aber es gibt eine Verzögerung, bis die Seite vollständig geladen ist. Das ist eigentlich die Verzögerung bis zum Ereignis DOMContentLoaded.

window.onload

Die load Ereignis auf dem Objekt window wird ausgelöst, wenn die gesamte Seite einschließlich Stilen, Bildern und anderen Ressourcen geladen wird. Dieses Ereignis ist über die Eigenschaft onload verfügbar.

Das folgende Beispiel zeigt die Bildgrößen korrekt an, da window.onload darauf wartet Alle Bilder:

window.onunload

Wenn ein Besucher die Seite verlässt, wird das Ereignis unload bei . Wir können dort etwas tun, das keine Verzögerung mit sich bringt, z. B. das Schließen verwandter Popup-Fenster.

Die bemerkenswerte Ausnahme ist das Senden von Analysen.

Nehmen wir an, wir sammeln Daten über den Zustand der Seite verwendet: Mausklicks, Scrollen, angezeigte Seitenbereiche usw.

Das Ereignis unload ist natürlich, wenn der Benutzer uns verlässt und wir dies möchten Speichern Sie die Daten auf unserem Server.

Die Daten werden im Hintergrund gesendet.Der Übergang zu einer anderen Seite wird nicht verzögert: Der Browser verlässt die Seite, führt jedoch weiterhin sendBeacon aus.

So wird es verwendet:

• Die Anfrage wird als POST gesendet.
• Wir können nicht nur eine Zeichenfolge senden, sondern auch Formulare und andere Formate, wie im Kapitel Abrufen beschrieben, aber normalerweise handelt es sich um ein Zeichenfolgenobjekt.
• Die Daten sind auf 64 KB begrenzt.

Wenn die Anforderung sendBeacon abgeschlossen ist, hat der Browser das Dokument wahrscheinlich bereits verlassen Es gibt keine Möglichkeit, eine Serverantwort zu erhalten (die normalerweise für Analysen leer ist).

Es gibt auch ein keepalive -Flag, um solche „After-Page-Left“ -Anfragen auszuführen Weitere Informationen finden Sie im Kapitel API abrufen.

Wenn wir den Übergang zu einer anderen Seite abbrechen möchten, können wir dies hier nicht tun. Wir können jedoch eine andere verwenden Ereignis – onbeforeunload.

window.onbeforeunload

Wenn ein Besucher die Navigation aw initiiert hat Wenn Sie die Seite verlassen oder versuchen, das Fenster zu schließen, fordert der beforeunload -Handler eine zusätzliche Bestätigung an.

Wenn wir das Ereignis abbrechen, fragt der Browser den Besucher möglicherweise, ob Sie sind sicher.

Sie können es versuchen, indem Sie diesen Code ausführen und dann die Seite neu laden:

Aus historischen Gründen gilt die Rückgabe einer nicht leeren Zeichenfolge auch als Abbruch das Ereignis. Vor einiger Zeit haben Browser es als Nachricht angezeigt, aber wie die moderne Spezifikation sagt, sollten sie es nicht.

Hier ein Beispiel:

Das Verhalten wurde geändert , weil einige Webmaster diesen Ereignishandler missbraucht haben, indem sie irreführende und nervige Nachrichten angezeigt haben. Im Moment wird es in alten Browsern möglicherweise noch als Nachricht angezeigt, aber abgesehen davon gibt es keine Möglichkeit, die dem Benutzer angezeigte Nachricht anzupassen.

readyState

Was passiert, wenn wir festlegen? der DOMContentLoaded -Handler nach dem Laden des Dokuments?

Natürlich wird er nie ausgeführt.

Es gibt Fälle, in denen wir nicht sicher sind, ob der Dokument ist fertig oder nicht. Wir möchten, dass unsere Funktion ausgeführt wird, wenn das DOM geladen wird, sei es jetzt oder später.

Die Eigenschaft document.readyState gibt Auskunft über den aktuellen Ladezustand.

Es gibt 3 mögliche Werte:

• "loading" – Das Dokument wird geladen.
• "interactive" – Das Dokument wurde vollständig gelesen.
• "complete" – Das Dokument wurde vollständig gelesen und alle Ressourcen (wie Bilder) werden geladen Auch.

So können wir document.readyState überprüfen und einen Handler einrichten oder den Code sofort ausführen, wenn er fertig ist.

auch das Ereignis readystatechange, das ausgelöst wird, wenn sich der Status ändert, sodass wir alle diese Status wie folgt drucken können:

Das readystatechange event ist eine alternative Methode zur Verfolgung des Ladezustands von Dokumenten, die vor langer Zeit aufgetreten ist. Heutzutage wird es nur noch selten verwendet.

Der Vollständigkeit halber sehen wir uns den vollständigen Ereignisfluss an.

Hier ist ein Dokument mit <iframe>, <img> und Handler, die Ereignisse protokollieren:

Das Arbeitsbeispiel befindet sich in der Sandbox.

Die typische Ausgabe:

Die Zahlen in eckigen Klammern geben den ungefähren Zeitpunkt an, zu dem dies geschieht. Ereignisse, die mit derselben Ziffer gekennzeichnet sind, treten ungefähr zur gleichen Zeit auf (± einige ms).

• document.readyState wird zu interactive direkt vor DOMContentLoaded. Diese beiden Dinge bedeuten tatsächlich dasselbe.
• document.readyState wird zu complete, wenn alle Ressourcen ( und img) werden geladen. Hier können wir sehen, dass dies ungefähr zur gleichen Zeit geschieht wie img.onload (img ist die letzte Ressource) und window.onload. Das Umschalten in den Status complete bedeutet dasselbe wie window.onload. Der Unterschied besteht darin, dass window.onload immer nach allen anderen load -Handlern funktioniert.

Zusammenfassung

Seitenladeereignisse:

• Das Ereignis DOMContentLoaded wird bei document ausgelöst, wenn sich das DOM befindet bereit. In dieser Phase können wir JavaScript auf Elemente anwenden.
  • Skript wie <script>https://javascript.info/...</script> oder <script src="https://javascript.info/..."></script> blockiert DOMContentLoaded, der Browser wartet Damit sie ausgeführt werden können.
  • Bilder und andere Ressourcen werden möglicherweise auch weiterhin geladen.