JavaScript-Onload-Ereignis

Zusammenfassung: In diesem Lernprogramm erfahren Sie, wie Sie mit dem Ladeereignis umgehen, das auf die Dokument-, Bild- und Skriptelemente in JavaScript ausgelöst wird.

Das Ladeereignis des Fensters

Für das Objekt window wird das Ereignis load ausgelöst, wenn das Die gesamte Webseite (HTML) wurde vollständig geladen, einschließlich aller abhängigen Ressourcen wie JavaScript-Dateien, CSS-Dateien und Bilder.

Um das Ereignis load zu behandeln, registrieren Sie sich Ein Ereignis-Listener, der die Methode addEventListener() verwendet:

Code language: JavaScript (javascript)

Oder die Methode onload -Eigenschaft des window -Objekts:

Code language: JavaScript (javascript)

Wenn Sie ein Altsystem verwalten, stellen Sie dies möglicherweise fest Der Ereignishandler load wird im body-Element des HTML-Dokuments wie folgt registriert:

Es wird empfohlen, die Methode zum Zuweisen der Ereignisbehandlungsroutine onload, wann immer dies möglich ist.

Ladeereignis des Bildes

Die load Ereignis tritt auch bei Bildern auf. Um das Ereignis load für die Bilder zu behandeln, können Sie die Methode addEventListener() der Bildelemente verwenden.

Die Im folgenden Beispiel wird mithilfe des Ereignishandlers load ermittelt, ob ein im DOM-Baum vorhandenes Bild vollständig geladen wurde:

Sie können eine onload Ereignishandler direkt mit dem Attribut onload des <img> -Elements wie folgt:

Code language: HTML, XML (xml)

Wenn Sie ein Bildelement dynamisch erstellen, können Sie eine onload -Ereignishandler zuweisen, bevor Sie die -Eigenschaft wie folgt:

Funktionsweise:

• Erstellen Sie zunächst ein Bildelement, nachdem das Dokument vollständig geladen wurde, indem Sie den Code in das Dokument einfügen Ereignishandler des Ladeereignisses des Fensters.
• Zweitens weisen Sie dem Bild den Ereignishandler onload dem Bild zu.
• Fügen Sie drittens das Bild hinzu zum Dokument.
• Weisen Sie abschließend dem Attribut src eine Bild-URL zu. Das Bild wird in das Element heruntergeladen, sobald die Eigenschaft src festgelegt ist.

Das Ladeereignis des Skripts

Die <script> unterstützt auch das Ereignis load, das sich geringfügig von den Standardmethoden unterscheidet.

Das Ereignis load des Skripts ermöglicht es Ihnen um zu überprüfen, ob eine JavaScript-Datei vollständig geladen wurde.

Im Gegensatz zu den Bildern lädt der Webbrowser JavaScript-Dateien erst herunter, nachdem die Eigenschaft src zugewiesen wurde und die Das Element <script> wurde dem Dokument hinzugefügt.

Der folgende Code lädt die Datei app.js, nachdem die Seite erstellt wurde vollständig geladen. Es weist einen onload -Ereignishandler zu, um zu überprüfen, ob die app.js vollständig geladen wurde.

Zusammenfassung