JavaScript Warten Sie, bis die Seite geladen wurde

1. Verwenden Sie den Ereignis-Listener, um auf das Laden der Seite in JavaScript zu warten
2. Verwenden Sie das Ereignis window.onload, um in JavaScript auf das Laden der Seite zu warten

Im heutigen Beitrag lernen Sie, wie Sie darauf warten, dass eine Seite vollständig in JavaScript geladen wird.

Verwenden Sie den Ereignis-Listener, um auf das Laden der Seite in JavaScript zu warten

Die Methode addEventListener() der EventTarget-Schnittstelle konfiguriert eine Funktion, die immer dann aufgerufen wird, wenn das angegebene Ereignis an das Ziel geliefert wird.

Die Methode addEventListener() funktioniert durch Hinzufügen einer Funktion oder eines Objekts, das den EventListener implementiert, zur Liste der Ereignis-Listener für den im EventTarget angegebenen Ereignistyp, für den sie aufgerufen wird.

Wenn sich die Funktion oder das Objekt bereits in der Liste der Ereignis-Listener für dieses Ziel befindet, wird die Funktion oder das Objekt kein zweites Mal hinzugefügt.

Die Methode removeEventListener() der Schnittstelle EventTarget entfernt einen zuvor mit EventTarget.addEventListener() registrierten Event-Listener aus dem Target.

Schauen wir uns das Beispiel unten an.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.addEventListener(
    'load', () => {alert('Hello World.This page is loaded!')});

Die Ereignis-Listener-Funktion wird im obigen Beispiel im Fenster registriert. Dieser Ereignis-Listener wartet darauf, dass die Seite vollständig geladen ist, bevor er den Benutzer darauf hinweist, dass die Seite geladen ist.

Versuchen Sie, den folgenden Code in Ihrem Browser auszuführen; es wird das folgende Ergebnis zeigen.

Ausgang:

Verwenden Sie das Ereignis window.onload, um in JavaScript auf das Laden der Seite zu warten

Die Eigenschaft onload des Mixins GlobalEventHandlers ist ein Event-Handler, der Ladeereignisse in einem window, XMLHttpRequest, img-Element usw. verarbeitet.

Das Ladeereignis wird ausgelöst, wenn eine bestimmte Ressource geladen wurde.

Das Ladeereignis wird am Ende des Dokumentladevorgangs ausgelöst. Alle Objekte im Dokument befinden sich im DOM und alle Bilder, Skripte, Links und Subframes wurden vollständig geladen.

Der einzige Unterschied zwischen beiden Lösungen besteht darin, dass window.onload in neueren Browsern window.onload nicht auslöst, wenn Sie die Zurück-/Vorwärts-Verlaufsschaltflächen verwenden. Im Gegensatz dazu werden Zuhörer jedes Mal gefeuert.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.onload = function() {
  console.log('Hola!.This page is loaded!')
};

Ausgang:

"Hola!.This page is loaded!"

Demo hier