HTMLElement: load-Ereignis
Das load-Ereignis tritt bei Elementen auf, die eine Ressource enthalten, wenn die Ressource erfolgreich geladen wurde. Derzeit umfasst die Liste der unterstützten HTML-Elemente: <body>, <embed>, <iframe>, <img>, <link>, <object>, <script>, <style> und <track>.
Hinweis:
Das load-Ereignis auf HTMLBodyElement ist eigentlich ein Alias für das window.onload Ereignis. Daher wird das load-Ereignis nur auf dem <body>-Element ausgelöst, wenn alle Ressourcen des Dokuments geladen oder fehlgeschlagen sind. Aus Gründen der Klarheit wird jedoch empfohlen, den Ereignishandler direkt an das window-Objekt anzuhängen, anstatt an HTMLBodyElement.
Dieses Ereignis ist nicht stornierbar und löst keine Bubbling aus.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("load", (event) => { })
onload = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Dieses Beispiel gibt eine Meldung auf dem Bildschirm aus, wenn das <img>-Element seine Ressource erfolgreich lädt.
HTML
<img
id="image"
src="/shared-assets/images/examples/favicon144.png"
alt="MDN logo"
width="72" />
<div><button onclick="reload()">Reload</button></div>
JavaScript
const image = document.getElementById("image");
image.onload = () => {
document.body.appendChild(document.createElement("div")).textContent =
"loaded!";
};
function reload() {
image.src = "/shared-assets/images/examples/favicon144.png";
}
Ergebnis
Spezifikationen
| Specification |
|---|
| UI Events # event-type-load |
| HTML # handler-onload |
| HTML # event-load |