Yang lebih luas yang didukung: jendela.onload
atau dokumen.onload
?
Di beberapa browser ini sekarang mengambil alih peran dari dokumen.onload
dan kebakaran ketika DOM siap juga.
dokumen.onload
jendela.onload
muncul untuk menjadi yang paling banyak didukung. Bahkan, beberapa dari sebagian besar browser modern memiliki dalam arti digantikan dokumen.onload
dengan jendela.onload
.
Browser mendukung isu-isu yang kemungkinan besar alasan mengapa banyak orang yang mulai menggunakan library seperti jQuery untuk menangani memeriksa dokumen yang siap, seperti:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
Untuk tujuan sejarah. jendela.onload
vs tubuh.onload
:
pertanyaan serupa diajukan pada codingforums sementara kembali mengenai penggunaan
jendela.onload
atastubuh.onload
. Yang hasil tampaknya bahwa anda harus menggunakanjendela.onload
karena hal ini baik untuk memisahkan struktur dari tindakan.
Ide umumnya adalah bahwa jendela.onload kebakaran ketika dokumen's jendela siap untuk presentasi dan dokumen.onload kebakaran ketika pohon DOM (dibangun dari markup kode dalam dokumen) selesai.
Idealnya, berlangganan DOM-pohon peristiwa, memungkinkan offscreen-manipulasi melalui Javascript, menimbulkan hampir tidak ada beban CPU. Sebaliknya, jendela.onload
bisaambil beberapa saat untuk api**, ketika beberapa sumber daya eksternal belum dapat diminta, diurai dan dimuat.
►Skenario pengujian:
Untuk mengamati perbedaan dan bagaimana browser anda pilihan alat tersebut event handler, cukup menyisipkan kode berikut di dalam dokumen anda's - <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>
►Hasil:
Berikut ini adalah perilaku yang dihasilkan, yang dapat diobservasi untuk Chrome v20 (dan mungkin sebagian besar browser yang ada saat ini).
dokumen.onload
acara.onload
kebakaran dua kali ketika menyatakan dalam <body>
, sekali ketika dinyatakan dalam <head>
(di mana acara kemudian bertindak sebagai dokumen.onload
).jendela.onload
event handler dalam batas-HTML-<head>
elemen.►Contoh Proyek:
Kode di atas diambil dari proyek ini's basis kode (index.html
dan keyboarder.js
).
Untuk daftar event handler dari objek window, silakan merujuk ke MDN dokumentasi.
Menambahkan Event Listener
<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')
})
Menurut Parsing dokumen HTML - akhir,
Browser mem-parsing HTML source dan berjalan tangguhan script.
A DOMContentLoaded
yang dikirim di dokumen
ketika semua HTML yang telah diurai dan lari. Acara gelembung untuk jendela
.
Browser beban sumber daya (seperti gambar) yang menunda beban acara.
Beban
acara ini dikirim pada jendela
.
Oleh karena itu, urutan eksekusi akan
DOMContentLoaded
acara pendengar dari jendela
dalam menangkap faseDOMContentLoaded
acara pendengar dokumen
DOMContentLoaded
acara pendengar dari jendela
di tahap bubblebeban
acara pendengar (termasuk onload
event handler) dari jendela
Gelembung beban
acara pendengar (termasuk onload
event handler) dalam dokumen
tidak boleh dipanggil. Hanya menangkap beban
pendengar akan dipanggil, tapi karena beban dari sub-sumber daya seperti stylesheet, bukan karena beban dari dokumen itu sendiri.
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
};
Di Chrome, jendela.onload adalah berbeda dari <body onload="">
, padahal mereka adalah sama dalam kedua Firefox(versi 35.0) dan IE (versi 11).
Anda bisa memulai dengan cuplikan berikut:
<!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>
Dan anda akan melihat kedua "jendela dimuat"(yang datang pertama) dan "body onload" di Chrome konsol. Namun, anda akan melihat hanya "body onload" di Firefox dan IE. Jika anda menjalankan "jendela.onload.toString()
" di konsol dari IE & FF, anda akan melihat:
"function onload(event) { bodyOnloadHandler () "
yang berarti bahwa tugas "jendela.onload = function(e)..." ditimpa.
jendela.onload
dan onunload
adalah jalan pintas untuk dokumen.tubuh.onload
dan dokumen.tubuh.onunload
dokumen.onload
dan onload
handler pada semua tag html tampaknya menjadi pendiam namun tidak pernah memicu
'onload
' dalam dokumen -> benar