เนื่องจากเหตุการณ์ window.onload จำเป็นต้องดำเนินการหลังจากโหลดเนื้อหาทั้งหมดของเพจแล้ว (รวมถึงรูปภาพ ฯลฯ) เราจึงมักนิยมเรียกใช้งานสคริปต์ทันทีที่โหลด DOM ในความเป็นจริง เบราว์เซอร์กระแสหลักส่วนใหญ่ (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) มีวิธีการเหตุการณ์นี้: addDOMLoadEvent
document.addEventListener("DOMContentLoaded", init, false);
แล้วเราจะจำลองเหตุการณ์ addDOMLoadEvent สำหรับ IE ได้อย่างไร
ก่อนอื่น Matthias Miller ได้จัดเตรียมวิธีแก้ปัญหาต่อไปนี้:
// สำหรับ Internet Explorer (ใช้ความคิดเห็นแบบมีเงื่อนไข)
/*@cc_on @*/
/*@ถ้า (@_win32)
document.write("<script id=__ie_onload เลื่อน src=javascript:void(0)></script>");
สคริปต์ var = document.getElementById("__ie_onload");
script.onreadystatechange = ฟังก์ชั่น () {
ถ้า (this.readyState == "สมบูรณ์") {
init(); // เรียกตัวจัดการ onload
-
-
/*@จบ @*/
ต่อมา Diego Perini ได้จัดเตรียมโซลูชันที่ใช้เมธอด doScroll() เพื่อจำลองเหตุการณ์ addDOMLoadEvent และโดยทั่วไปโซลูชันนี้ถูกนำมาใช้โดยเฟรมเวิร์ก JavaScript หลัก (JQuery, YUI ฯลฯ)
หลักการมีพื้นฐานดังนี้:
เมื่อเหตุการณ์ ondocumentready เริ่มทำงาน เอกสาร (เอกสาร) จะถูกแยกวิเคราะห์และสร้างโดยสมบูรณ์ หากส่วนประกอบจำเป็นต้องจัดการโครงสร้างเอกสารต้นฉบับ จะต้องวางรหัสเริ่มต้นหลังจากนี้ เหตุการณ์ ondocumentready จะบอกส่วนประกอบว่าโหลดทั้งหน้าแล้วและเริ่มทำงานทันทีก่อนที่เหตุการณ์ onload ของเอกสารเริ่มต้นจะเริ่มทำงาน
วิธีการบางอย่าง เช่น doScroll กำหนดให้โหลดเอกสารต้นฉบับจนครบถ้วน หากวิธีการเหล่านี้เป็นส่วนหนึ่งของฟังก์ชันการเริ่มต้น วิธีการเหล่านี้จะถูกดำเนินการเมื่อเหตุการณ์ ondocumentready เริ่มทำงาน
-
-
*IEContentLoaded.js
-
* ผู้แต่ง: Diego Perini (diego.perini ที่ gmail.com) NWBOX Srl
* สรุป: การจำลอง DOMContentLoaded สำหรับเบราว์เซอร์ IE
* อัปเดต: 05/10/2550
* ใบอนุญาต: GPL/CC
* เวอร์ชัน: จะแจ้งภายหลัง
-
-
// @w อ้างอิงหน้าต่าง
// @fn
ฟังก์ชั่นอ้างอิงฟังก์ชั่น IEContentLoaded (w, fn) {
var d = w.document, เสร็จแล้ว = false,
//ยิงเพียงครั้งเดียว
เริ่มต้น = ฟังก์ชั่น () {
ถ้า (! เสร็จสิ้น) {
เสร็จแล้ว = จริง;
เอฟเอ็น();
-
-
// สำรวจแล้วไม่มีข้อผิดพลาด
(การทำงาน () {
พยายาม {
// ส่งข้อผิดพลาดจนกระทั่งหลังจาก ondocumentready
d.documentElement.doScroll('ซ้าย');
} จับ (e) {
setTimeout(อาร์กิวเมนต์.callee, 50);
กลับ;
-
// ไม่มีข้อผิดพลาด ไฟไหม้
เริ่มต้น();
-
// พยายามยิงก่อนออนโหลดเสมอ
d.onreadystatechange = ฟังก์ชั่น() {
ถ้า (d.readyState == 'เสร็จสมบูรณ์') {
d.onreadystatechange = null;
เริ่มต้น();
-
-
-