HTMLElement: load-Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das load-Ereignis wird für Elemente ausgelöst, 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 dann 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 und nicht an HTMLBodyElement.
Dieses Ereignis kann nicht abgebrochen werden und es wird nicht weitergereicht.
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 Nachricht auf dem Bildschirm aus, wann immer 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>Reload</button></div>
JavaScript
const image = document.getElementById("image");
image.onload = () => {
document.body.appendChild(document.createElement("div")).textContent =
"loaded!";
};
document.querySelector("button").addEventListener("click", reload);
function reload() {
image.src = "/shared-assets/images/examples/favicon144.png";
}
Ergebnis
Spezifikationen
| Specification |
|---|
| UI Events # event-type-load |
| HTML # handler-onload |
| HTML # event-load |