Karena event window.onload perlu dijalankan setelah semua konten halaman (termasuk gambar, dll.) dimuat, kita sering kali lebih memilih untuk mengeksekusi skrip segera setelah DOM dimuat. Faktanya, sebagian besar browser utama (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) menyediakan metode acara ini: addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
Jadi bagaimana kita mensimulasikan acara addDOMLoadEvent untuk IE?
Matthias Miller pertama kali memberikan solusi berikut:
// untuk Internet Explorer (menggunakan komentar bersyarat)
/*@cc_on @*/
/*@jika (@_win32)
document.write("<skrip id=__ie_onload defer src=javascript:void(0)></script>");
var skrip = document.getElementById("__ie_onload");
skrip.onreadystatechange = fungsi() {
if (ini.readyState == "selesai") {
init(); // memanggil pengendali onload
}
};
/*@akhir @*/
Diego Perini kemudian memberikan solusi yang menggunakan metode doScroll() untuk mensimulasikan acara addDOMLoadEvent, dan solusi ini pada dasarnya diadopsi oleh kerangka kerja JavaScript mainstream (JQuery, YUI, dll.).
Prinsipnya pada dasarnya adalah sebagai berikut:
Ketika peristiwa ondocumentready diaktifkan, dokumen (dokumen) telah sepenuhnya diurai dan dibuat. Jika komponen perlu memanipulasi struktur dokumen asli, kode inisialisasi perlu ditempatkan setelah ini. Peristiwa ondocumentready memberi tahu komponen bahwa seluruh halaman telah dimuat dan diaktifkan segera sebelum peristiwa onload dokumen awal diaktifkan.
Beberapa metode, seperti doScroll, mengharuskan dokumen asli dimuat sepenuhnya. Jika metode ini merupakan bagian dari fungsi inisialisasi, metode ini akan dieksekusi ketika peristiwa ondocumentready diaktifkan.
/*
*
*IEContentLoaded.js
*
* Penulis: Diego Perini (diego.perini di gmail.com) NWBOX Srl
* Ringkasan: Emulasi DOMContentLoaded untuk browser IE
* Diperbarui: 05/10/2007
* Lisensi: GPL/CC
* Versi: TBD
*
*/
// @w referensi jendela
// @fn
referensi fungsifungsi IEContentLoaded (w, fn) {
var d = w.dokumen, selesai = salah,
// hanya menembak sekali
init = fungsi () {
jika (!selesai) {
selesai = benar;
fn();
}
};
// polling tanpa kesalahan
(fungsi () {
mencoba {
// memunculkan kesalahan hingga dokumen siap
d.documentElement.doScroll('kiri');
} tangkapan (e) {
setTimeout(argumen.callee, 50);
kembali;
}
// tidak ada kesalahan, tembak
init();
})();
// mencoba untuk selalu mengaktifkan sebelum memuat
d.onreadystatechange = fungsi() {
if (d.readyState == 'selesai') {
d.onreadystatechange = null;
init();
}
};
}