Document.isReady: حل أصلي لاكتشاف جاهزية DOM

قد لا يعتمد الاعتماد على أطر عمل مثل النموذج الأولي وjQuery لإدارة أحداث window.onload يكون مرغوبا دائما. تستكشف هذه المقالة طرقًا بديلة لتحديد مدى جاهزية DOM، لا سيما من خلال استخدام document.isReady.

Querying Document.isReady

بالنسبة للمتصفحات الحديثة ذات واجهات برمجة تطبيقات الأحداث الثابتة، فإن يوفر حدث DOMContentLoaded طريقة قوية للتعامل مع أحداث DOM الجاهزة. توفر التطبيقات مثل ما يلي حلاً بسيطًا وفعالاً:

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

خاصية $.isReady الخاصة بـ jQuery

تقدم jQuery خاصية غير موثقة، $.isReady، والتي تعكس حالة استعداد DOM داخليًا. يتيح استخدام هذه الخاصية إجراء عمليات فحص موجزة:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

من المهم ملاحظة أن هذه الخاصية تظل غير موثقة ولا يمكن ضمان توفرها في إصدارات jQuery المستقبلية. استخدمه بحذر وكن مستعدًا للتغييرات المحتملة عند الترقيات.

مقتطف DOM جاهز مخصص

للحصول على توافق أوسع للمتصفح، يمكن استخدام مقتطف DOM جاهز مخصص. مستوحاة من نهج داستن دياز، فإنها تتحقق من document.readyState باستخدام تعبير عادي:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

تعتمد هذه الطريقة على حقيقة أن السلسلة الفرعية "in" موجودة في حالتي الاستعداد "التحميل" و"التفاعلية" ولكن ليس في الحالة "الاكتمال".