Window: load Event

Das load Event wird ausgelöst, wenn die gesamte Seite geladen ist, einschließlich aller abhängigen Ressourcen wie Stylesheets, Skripten, iframes und Bildern, mit Ausnahme derjenigen, die lazy geladen werden. Dies steht im Gegensatz zu DOMContentLoaded, welches ausgelöst wird, sobald das DOM der Seite geladen ist, ohne darauf zu warten, dass die Ressourcen zu Ende geladen sind.

Dieses Ereignis ist nicht abbrechbar und wird nicht nach oben weitergereicht.

Hinweis: Alle Ereignisse, die load genannt werden, werden nicht an Window weitergereicht, selbst wenn bubbles auf true initialisiert wird. Um load Ereignisse im Fenster zu erfassen, muss dieses load Ereignis direkt zum Fenster gesendet werden.

Hinweis: Das load Ereignis, das ausgesendet wird, wenn das Hauptdokument geladen wurde, wird auf dem window gesendet, hat aber zwei veränderte Eigenschaften: target ist document und path ist undefined. Diese beiden Eigenschaften sind aufgrund von älteren Konventionen verändert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.

addEventListener("load", (event) => {});

onload = (event) => {};

Ereignistyp

Ein generisches Event.

Beispiele

Protokollieren Sie eine Nachricht, wenn die Seite vollständig geladen ist:

window.addEventListener("load", (event) => {
  console.log("page is fully loaded");
});

Dasselbe, aber mit der onload Ereignishandlereigenschaft:

window.onload = (event) => {
  console.log("page is fully loaded");
};

Live-Beispiel

HTML

html

<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}

JavaScript

const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});

Ergebnis

Spezifikationen

Specification
UI Events # event-type-load
HTML Standard # delay-the-load-event

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document readyState API
Verwandte Ereignisse: