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.