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 ⁨Juli 2015⁩.

Das load-Ereignis wird für Elemente ausgelöst, die eine Ressource enthalten, wenn die Ressource erfolgreich geladen wurde. Derzeit sind die 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 fehlerhaft sind. Aus Gründen der Klarheit wird jedoch empfohlen, den Ereignishandler direkt an das window-Objekt anzuhängen statt an HTMLBodyElement.

Dieses Ereignis ist nicht abbrechbar 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) => { }

<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";
}