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
<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>
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: