Window: load — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("load", handler)

Beschreibung

Das load-Ereignis des Window-Objekts wird ausgelöst, sobald das Dokument und alle abhängigen Ressourcen vollständig geladen sind: Stylesheets, Skripte (auch async, defer und type="module"), iframes, Bilder und Schriften, die beim ersten Laden angefordert wurden. Ausgenommen sind Ressourcen mit loading="lazy", die noch nicht angefordert wurden.

Registriert wird es entweder mit window.addEventListener("load", handler) oder über die Eigenschaft window.onload = handler (entspricht dem HTML-Attribut <body onload="…">). Das Ereignis ist ein einfaches Event, es ist nicht abbrechbar und steigt nicht auf (kein Bubbling).

Einsatzgebiete sind Aufgaben, die fertig geladene Ressourcen benötigen: Bildgrößen messen, Layout-Berechnungen mit endgültigen Maßen, Performance-Messungen (z. B. mit performance.getEntriesByType("navigation")) oder das Nachladen von unwichtigen Skripten wie Analyse-Tools, ohne das erste Rendern zu behindern.

Wer nur auf den fertig aufgebauten DOM-Baum wartet, sollte stattdessen DOMContentLoaded verwenden – dieses Ereignis feuert deutlich früher, weil es nicht auf Bilder und Stylesheets wartet.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"load"`.
$handler Pflicht	(event: Event) => void \| EventListener		Funktion, die beim Auslösen aufgerufen wird. Erhält ein `Event`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ once: true }` (Listener nach einmaligem Aufruf entfernen) oder `{ signal }` (Entfernen per `AbortController`).

Beispiele

Bildmaße nach vollständigem Laden auslesen

window.addEventListener("load", (event) => {
  const img = document.querySelector("#hero");
  console.log(`Ereignis: ${event.type}`);
  console.log(`Bildgröße: ${img.naturalWidth}x${img.naturalHeight}`);
}, { once: true });

Ereignis: load Bildgröße: 1920x1080

Über die onload-Eigenschaft und wieder entfernen

window.onload = () => {
  console.log("Seite inkl. aller Ressourcen geladen");
};

// Handler entfernen (nur eine onload-Funktion möglich)
window.onload = null;

// Äquivalent mit addEventListener/removeEventListener
const handleLoad = () => console.log("geladen");
window.addEventListener("load", handleLoad);
window.removeEventListener("load", handleLoad);

Robust: auch reagieren, wenn load bereits vorbei ist

const whenLoaded = () => new Promise((resolve) => {
  if (document.readyState === "complete") {
    resolve();
  } else {
    window.addEventListener("load", () => resolve(), { once: true });
  }
});

await whenLoaded();
const [nav] = performance.getEntriesByType("navigation");
console.log(`Ladezeit: ${Math.round(nav.loadEventStart)} ms`);

Ladezeit: 842 ms

Unwichtiges Skript erst nach dem Laden einbinden

window.addEventListener("load", () => {
  const script = document.createElement("script");
  script.src = "/js/analytics.js";
  script.async = true;
  document.head.append(script);
}, { once: true });

// Wichtig · Fallstricke

Zu spät registriert: Wird der Listener erst nach dem Ereignis angehängt (z. B. in einem dynamisch nachgeladenen Skript), wird er nie aufgerufen. Vorher document.readyState === "complete" prüfen.
Nur ein onload: Eine neue Zuweisung an window.onload überschreibt vorherige Handler, auch das <body onload>-Attribut. Für mehrere Handler addEventListener nutzen.
Langsam: Ein großes Bild oder ein hängendes Drittanbieter-Skript verzögert load erheblich. Für DOM-Initialisierung ist DOMContentLoaded bzw. defer meist die bessere Wahl.
Lazy Loading: Bilder/iframes mit loading="lazy" außerhalb des sichtbaren Bereichs sind beim Auslösen noch nicht geladen.
Back/Forward-Cache: Wird eine Seite aus dem bfcache wiederhergestellt, feuert load nicht erneut. Dafür pageshow mit event.persisted verwenden.
Nicht abbrechbar, kein Bubbling. Wird in allen Browsern unterstützt; Optionen wie once und signal benötigen moderne Browser.

Siehe auch

Document: DOMContentLoaded Document.readyState Window: pageshow Window: beforeunload Element: wheel Window: storage