نظرًا لأن الحدث window.onload يحتاج إلى التنفيذ بعد تحميل كل محتوى الصفحة (بما في ذلك الصور وما إلى ذلك)، فإننا غالبًا ما نفضل تنفيذ البرنامج النصي بمجرد تحميل DOM. في الواقع، توفر معظم المتصفحات السائدة (Firefox 3+، Opera 9+، Safari 3+، Chrome 2+) طريقة الحدث هذه: addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
إذًا كيف يمكننا محاكاة حدث addDOMLoadEvent لـ IE؟
قدم ماتياس ميلر أولاً الحل التالي:
// لمتصفح Internet Explorer (باستخدام التعليقات الشرطية)
/*@cc_on @*/
/*@إذا (@_win32)
document.write("");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = وظيفة () {
إذا (this.readyState == "مكتمل") {
init(); // اتصل بمعالج التحميل
}
};
/*@نهاية @*/
قدم دييغو بيريني لاحقًا حلاً يستخدم طريقة doScroll() لمحاكاة حدث addDOMLoadEvent، وقد تم اعتماد هذا الحل بشكل أساسي من خلال أطر عمل JavaScript السائدة (JQuery وYUI وما إلى ذلك).
المبدأ هو في الأساس كما يلي:
عند إطلاق الحدث ondocumentready، يكون قد تم تحليل المستند (المستند) وإنشاؤه بالكامل. إذا كان المكون يحتاج إلى معالجة بنية المستند الأصلي، فيجب وضع رمز التهيئة بعد ذلك. يخبر الحدث ondocumentready المكون بأنه قد تم تحميل الصفحة بأكملها ويتم تشغيلها مباشرة قبل إطلاق حدث التحميل للمستند الأولي.
تتطلب بعض الطرق، مثل doScroll، تحميل المستند الأصلي بالكامل. إذا كانت هذه الأساليب جزءًا من وظيفة التهيئة، فسيتم تنفيذها عند إطلاق الحدث ondocumentready.
/*
*
*IEContentLoaded.js
*
* المؤلف: دييغو بيريني (diego.perini at gmail.com) NWBOX Srl
* ملخص: محاكاة DOMContentLoaded لمتصفحات IE
* تم التحديث: 10/05/2007
* الترخيص: GPL/CC
* الإصدار: سيتم تحديده لاحقًا
*
*/
// @w مرجع النافذة
// @fn
الدالة المرجعية IEContentLoaded (w, fn) {
فار د = ث.وثيقة، تم = خطأ،
// النار مرة واحدة فقط
الحرف الأول = الوظيفة () {
إذا (! تم) {
تم = صحيح؛
الجبهة الوطنية ()؛
}
};
// الاقتراع لعدم وجود أخطاء
(وظيفة () {
يحاول {
// يلقي الأخطاء حتى بعد ondocumentready
d.documentElement.doScroll('left');
} قبض (ه) {
setTimeout(arguments.callee, 50);
يعود؛
}
// لا توجد أخطاء، النار
الحرف الأول () ؛
})();
// محاولة إطلاق النار دائمًا قبل التحميل
د.onreadystatechange = وظيفة () {
إذا (d.readyState == 'مكتمل') {
d.onreadystatechange = null;
الحرف الأول () ؛
}
};
}