Was wird am meisten unterstützt: window.onload o document.onload ?
Antworten
Zu viele Anzeigen?
Wann schießen sie?
- Standardmäßig wird sie ausgelöst, wenn die gesamte Seite geladen wird, einschließlich ihren Inhalt (Bilder, CSS, Skripte usw.).
In einigen Browsern übernimmt es nun die Rolle von document.onload und wird ausgelöst, wenn das DOM ebenfalls bereit ist.
document.onload
- Sie wird aufgerufen, wenn das DOM bereit ist, was sein kann vor zu Bildern und anderen externen Inhalten geladen wird.
Wie gut werden sie unterstützt?
window.onload scheint die am weitesten verbreitete Methode zu sein. In der Tat haben einige der modernsten Browser in gewissem Sinne die document.onload con window.onload .
Probleme mit der Browserunterstützung sind höchstwahrscheinlich der Grund, warum viele Menschen beginnen, Bibliotheken wie jQuery um zu prüfen, ob das Dokument fertig ist, etwa so:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });Für die Zwecke der Geschichte. window.onload gegen body.onload :
Eine ähnliche Frage wurde gestellt auf codingforums eine Weile vor einiger Zeit über die Verwendung von
window.onloadüberbody.onload. Das Ergebnis schien zu sein, dass manwindow.onloaddenn es ist es gut ist, die Struktur von der Handlung zu trennen.
Lorenz Lo Sauer
Punkte
22044
Die allgemeine Idee ist, dass window.onload feuert wenn das Fenster des Dokuments bereit zur Präsentation y document.onload feuert wenn die DOM-Baum (aus dem Auszeichnungscode des Dokuments erstellt) ist abgeschlossen .
Idealerweise wird das Abonnement von DOM-Baum-Ereignisse erlaubt Offscreen-Manipulationen durch Javascript, was zu fast keine CPU-Belastung . Das Gegenteil ist der Fall, window.onload kann eine Weile zum Feuern brauchen wenn mehrere externe Ressourcen noch angefordert, geparst und geladen werden müssen.
Test-Szenario:
Um den Unterschied zu beobachten und wie Ihr Browser der Wahl implementiert das oben Genannte Ereignisbehandler fügen Sie einfach den folgenden Code in Ihr Dokument ein - <body> - Tag.
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>Ergebnis:
Hier ist das resultierende Verhalten, beobachtbar für Chrome v20 (und wahrscheinlich die meisten aktuellen Browsern).
- Nein
document.onloadVeranstaltung. onloadwird zweimal ausgelöst, wenn es innerhalb der<body>einmal, wenn sie innerhalb der<head>(wobei das Ereignis dann alsdocument.onload).- Das Zählen und Handeln in Abhängigkeit vom Zählerstand ermöglicht es, beide Verhaltensweisen zu emulieren.
- Alternativ können Sie auch die
window.onloadEvent-Handler innerhalb der Grenzen des HTML-<head>Element.
Beispielprojekt:
Der obige Code stammt aus Dieses Projekt ist Codebase ( index.html y keyboarder.js ).
Für eine Liste von Ereignisbehandler des Fensterobjekts entnehmen Sie bitte der MDN-Dokumentation.
Aakash
Punkte
17068
Ereignis-Listener hinzufügen
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/*
- Code to execute when only the HTML document is loaded.
- This doesn't wait for stylesheets,
images, and subframes to finish loading.
*/
});
</script>Update March 2017
1 Vanille-JavaScript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})2 jQuery
$(window).on('load', function() {
console.log('All assets are loaded')
})Viel Glück!
Oriol
Punkte
246798
Según Parsing von HTML-Dokumenten - Das Ende ,
-
Der Browser parst den HTML-Quelltext und führt zeitversetzte Skripte aus.
-
A
DOMContentLoadedwird bei derdocumentwenn der gesamte HTML-Code geparst und ausgeführt worden ist. Das Ereignis blubbert zumwindow. -
Der Browser lädt Ressourcen (wie Bilder), die das Ladeereignis verzögern.
-
A
loadwird das Ereignis bei derwindow.
Daher wird die Reihenfolge der Ausführung sein
DOMContentLoadedEreignis-Listener vonwindowin der EinfangphaseDOMContentLoadedEreignis-Listener vondocumentDOMContentLoadedEreignis-Listener vonwindowin der BlasenphaseloadEreignis-Listener (einschließlichonloadEreignisbehandler) vonwindow
Eine Seifenblase load Ereignis-Listener (einschließlich onload Ereignisbehandler) in document sollte niemals aufgerufen werden. Nur Erfassung load Listener aufgerufen werden, aber aufgrund der Belastung durch eine Sub-Ressource wie ein Stylesheet, nicht aufgrund der Belastung durch das Dokument selbst.
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - bubble'); // 3rd
});
window.addEventListener('load', function() {
console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
/* Filter out load events not related to the document */
if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
console.log('window - load - bubble'); // 4th
});
window.onload = function() {
console.log('window - onload'); // 4th
};
document.onload = function() {
console.log('document - onload'); // DOES NOT HAPPEN
};
VincentZHANG
Punkte
745
In Chrome ist window.onload anders als <body onload=""> während sie in Firefox (Version 35.0) und IE (Version 11) identisch sind.
Sie können dies anhand des folgenden Ausschnitts untersuchen:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>In der Chrome-Konsole sehen Sie dann sowohl "window loaded" (was zuerst kommt) als auch "body onload". In Firefox und IE wird jedoch nur "body onload" angezeigt. Wenn Sie " window.onload.toString() " in den Konsolen von IE und FF sehen Sie:
"function onload(event) { bodyOnloadHandler() }"
was bedeutet, dass die Zuweisung "window.onload = function(e)..." überschrieben wird.
- See previous answers
- Weitere Antworten anzeigen
3 Stimmen
Die MDN-Dokumente erklären dies
windowVeranstaltungen:onloadyDOMContentLoaded. Beispiel für die Verwendung:,window.addEventListener('DOMContentLoaded', callback). Ab Mitte 2019 kompatibel mit allen gängigen Browsern. ----- developer.mozilla.org/de-US/docs/Web/API/Window/ ------ developer.mozilla.org/de-US/docs/Web/API/Window/load_event0 Stimmen
Bei mir sogar noch heute, in Firefox 75.0,
window.onloadydocument.onloadsind verschiedene voreinander!window.onloadscheint erst danach zu erfolgen und ist etwas stärker belastet alsdocument.onload! (Einige Dinge funktionieren mit window, die mit document nicht funktionieren! Das gilt auch für document.onreadstatechange 'complete'!)