Wat wordt breder ondersteund: window.onload
of document.onload
?
Antwoord 1, autoriteit 100%
Wanneer vuren ze?
- Standaard wordt het geactiveerd wanneer de hele pagina wordt geladen, inclusiefde inhoud (afbeeldingen, CSS, scripts, enz.).
In sommige browsers neemt het nu de rol van document.onload
over en wordt het ook geactiveerd wanneer het DOM gereed is.
document.onload
- Het wordt aangeroepen wanneer de DOM gereed is, wat voorafgaandkan zijn voordat afbeeldingen en andere externe inhoud worden geladen.
Hoe goed worden ze ondersteund?
window.onload
lijkt het meest ondersteund te worden. Sommige van de modernste browsers hebben in zekere zin document.onload
vervangen door window.onload
.
Browserondersteuningsproblemen zijn hoogstwaarschijnlijk de reden waarom veel mensen bibliotheken zoals jQuerygaan gebruiken om de controle uit te voeren voor het document klaar is, zoals zo:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
Voor het doel van de geschiedenis. window.onload
vs body.onload
:
Een soortgelijke vraag werd een tijdje gesteld op codingforums
terug over het gebruik vanwindow.onload
viabody.onload
. De
het resultaat leek te zijn dat jewindow.onload
zou moeten gebruiken omdat het zo is
goed om je structuur van de actie te scheiden.
Antwoord 2, autoriteit 36%
Het algemene idee is dat window.onload wordt geactiveerdwanneer het documentvenster klaar is voor presentatieen document.onload wordt geactiveerdwanneer de >DOM-structuur(gebouwd op basis van de opmaakcode in het document) is voltooid.
Idealiter staat het abonneren op DOM-tree-evenementenoffscreen-manipulaties toe via Javascript, waarbij bijna geen CPU-belasting. Daarentegen kan window.onload
een tijdje duren om te activeren, wanneer meerdere externe bronnen nog moeten worden aangevraagd, geparseerd en geladen.
>Testscenario:
Om het verschil te zien en hoe uw browsernaar keuze implementeertde bovengenoemde event-handlers, voegt u eenvoudig de volgende code in uw document in – <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>
>Resultaat:
Dit is het resulterende gedrag, waarneembaar voor Chrome v20 (en waarschijnlijk de meeste huidige browsers).
- Geen
document.onload
gebeurtenis. onload
wordt tweemaal geactiveerd wanneer gedeclareerd in de<body>
, eenmaal wanneer gedeclareerd in de<head>
(waar de gebeurtenis dan fungeert alsdocument.onload
).- door te tellen en te handelen afhankelijk van de status van de teller, kunnen beide gebeurtenisgedragingen worden geëmuleerd.
- U kunt ook de gebeurtenishandler
window.onload
declareren binnen de grenzen van het HTML-<head>
-element.
>Voorbeeldproject:
De bovenstaande code is afkomstig uit de decodebase van dit project (index.html
en keyboarder.js
).
Voor een lijst met event-handlers van het window-object, raadpleeg de MDN-documentatie.
Antwoord 3, autoriteit 23%
Gebeurtenisluisteraar toevoegen
<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')
})
Veel geluk.
Antwoord 4, autoriteit 11%
Volgens Html-documenten ontleden – Het einde,
-
De browser analyseert de HTML-bron en voert uitgestelde scripts uit.
-
Een
DOMContentLoaded
wordt verzonden naar hetdocument
wanneer alle HTML is geparseerd en uitgevoerd. De gebeurtenis bubbelt naar hetwindow
. -
De browser laadt bronnen (zoals afbeeldingen) die de laadgebeurtenis vertragen.
-
Een
load
-gebeurtenis wordt verzonden in hetwindow
.
Daarom is de volgorde van uitvoering
DOMContentLoaded
gebeurtenislisteners vanwindow
in de vastlegfaseDOMContentLoaded
gebeurtenislisteners vandocument
DOMContentLoaded
gebeurtenislisteners vanwindow
in de bubble-faseload
gebeurtenislisteners (inclusiefonload
gebeurtenishandler) vanwindow
Een bubbel load
gebeurtenislistener (inclusief onload
gebeurtenishandler) in document
mag nooit worden aangeroepen.Alleen capture load
luisteraars kunnen worden aangeroepen, maar vanwege de belasting van een subbron zoals een stylesheet, niet vanwege de belasting van het document zelf.
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
};
Antwoord 5, autoriteit 2%
In Chrome is window.onload anders dan <body onload="">
, terwijl ze hetzelfde zijn in zowel Firefox (versie 35.0) als IE (versie 11).
p>
Je zou dat kunnen onderzoeken aan de hand van het volgende fragment:
<!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>
En je ziet zowel ‘window loaded’ (wat als eerste komt) als ‘body onload’ in de Chrome-console. U ziet echter alleen “body onload” in Firefox en IE. Als u “window.onload.toString()
” uitvoert in de consoles van IE & FF, je zult zien:
“function onload(event) { bodyOnloadHandler() }”
wat betekent dat de toewijzing “window.onload = function(e)…” wordt overschreven.
Antwoord 6
window.onload
en onunload
zijn snelkoppelingen naar document.body.onload
en document.body.onunload
document.onload
en onload
handler op alle html-tags lijken te zijn gereserveerd, maar worden nooit geactiveerd
‘onload
‘ in document -> waar
Antwoord 7
window.onload zijn echter vaak hetzelfde. Op dezelfde manier wordt body.onload window.onload in IE.
Antwoord 8
Window.onload is echter de standaard – de webbrowser in de PS3 (gebaseerd op Netfront) ondersteunt het window-object niet, dus je kunt het daar niet gebruiken.
Antwoord 9
Kortom
window.onload
wordt niet ondersteund door IE 6-8document.onload
wordt door geen enkele moderne browser ondersteund (gebeurtenis wordt nooit geactiveerd)