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 tatsächlich 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. Zur Klarheit wird jedoch empfohlen, den Ereignishandler direkt an das window-Objekt zu binden, anstatt an HTMLBodyElement.
Dieses Ereignis ist nicht abbruchfähig und löst keine Ereignisblase 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 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 |