Care este mai larg acceptate: fereastră.onload " sau " document.onload
?
În unele browsere acum preia rolul de document.onload și incendii de când DOM este pregătit la fel de bine.
document.onload
fereastră.onload
pare a fi cea mai larg acceptată. În fapt, unele dintre cele mai moderne browsere au într-un sens înlocuit document.onload " cu " fereastra.onload
.
Sprijin Browser-ul probleme sunt cel mai probabil motivul pentru care mulți oameni au început să folosească biblioteci, cum ar fi jQuery să se ocupe de verificarea ca documentul să fie gata, astfel:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
În scopul de istorie. fereastră.onload
vs corpul.onload
:
O întrebare similară a fost pusă pe codingforums în timp ce înapoi în ceea ce privește utilizarea de fereastră.onload "peste" corpul.onload
. La rezultatul pare a fi faptul că ar trebui să utilizați fereastra.onload
pentru că este bun pentru a separa structura de acțiune.
Ideea generală este că fereastră.onload incendii când documentul's ferestrei este gata pentru prezentare și document.onload incendii atunci când DOM tree (construit de marcare cod în document) este finalizat**.
În mod ideal, abonarea la DOM-copac evenimente, permite offscreen-manipulări prin intermediul Javascript, suporta aproape nici CPU load. Contrar, fereastră.onload
poate ia-o în timp ce la foc, atunci când mai multe resurse externe au fost încă să fie solicitat, analizat și încărcate.
►Scenariu de Test:
Pentru a observa diferența și cum de browser-ul dvs. la alegere implementează sus stivuitoare eveniment, pur și simplu introduceți codul de mai jos în documentul's - <body>
- tag-ul.
<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>
►Rezultat:
Aici este rezultată comportament observabil pentru Chrome v20 (și, probabil, cele mai multe browsere actuale).
document.onload
eveniment.onload
trage de două ori atunci când sunt declarate în interiorul <body>
, o dată, când a declarat în interiorul <head>
(acolo unde este cazul acționează apoi ca `document.onload`` ).fereastră.onload` event handler în limitele HTML-
`` element.►Exemplu De Proiect:
Codul de mai sus este preluat din acest proiect's codebase (index.html
și keyboarder.js
).
Pentru o listă de stivuitoare eveniment al obiectului window, vă rugăm să consultați MDN documentare.
Adauga Eveniment Ascultător
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
Potrivit Parsarea HTML documente - end,
Browser-ul analizează sursa HTML si ruleaza amânat script-uri.
O DOMContentLoaded
este trimis la "document" atunci când toate HTML a fost analizat și au fugit. Evenimentul bule pentru "fereastra".
Browser-ul încarcă resurse (cum ar fi imagini) care întârzie sarcina eveniment.
O "încărcare" cazul este trimis la "fereastra".
Prin urmare, ordinul de execuție va fi
DOMContentLoaded
ascultătorii eveniment de "fereastra" în faza de captareDOMContentLoaded
ascultătorii eveniment de "document"DOMContentLoaded
ascultătorii eveniment de "fereastra" în faza bubbleUn balon de "încărcare" ascultător eveniment (inclusiv `onload event handler), în "document" nu ar trebui să fie invocate. Captura doar "încărcare" de ascultatori ar putea fi invocate, dar din cauza sarcinii de un sub-resursă ca o foaie de stil, nu din cauza de încărcare a documentului în sine.
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
};
În Chrome, fereastra.onload este diferit de <body onload="">
, întrucât ele sunt aceleași în ambele Firefox(versiunea 35.0) și IE (versiunea 11).
Ai putea explora că prin următorul 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>
Și veți vedea ambele "fereastră încărcate"(care vine în primul rând) și "body onload" în google Chrome consola. Cu toate acestea, veți vedea doar "body onload" în Firefox și IE. Dacă tu a alerga " fereastră.onload.toString()`" în console de IE & FF, veți vedea:
"funcția onload(eveniment) { bodyOnloadHandler() }"
ceea ce înseamnă că cesiunea de "fereastră.onload = function(e)..." este suprascris.
fereastră.onload " și " onunload
sunt comenzi rapide pentru document.corpul.onload " și " document.corpul.onunload`
document.onload " și " onload
handler pe toate html-tag-ul pare a fi rezervate cu toate acestea nu a declanșat
'onload
' în document -> adevărat