window.onload مقابل document.onload في JavaScript

ستوضح هذه المدونة الفرق بين window.onload و document.onload في JavaScript.

window.onload مقابل document.onload في JavaScript

ال ' window.onload 'عند انتهاء تحميل الصفحة بأكملها (بما في ذلك مواردها). وهذا يعني أنه يمكنك استخدام هذا الحدث لضمان تحميل الصفحة بالكامل قبل تشغيل أي رمز يعتمد على محتوى الصفحة.

ال ' document.onload 'يشبه حدث window.onload ، ولكنه ينشط فقط عندما ينتهي تحميل DOM الخاص بالمستند (بنية محتوى الصفحة). يشير هذا إلى أنه يمكنك استخدام هذا الحدث للتأكد من أن محتوى الصفحة محمّل بالكامل وجاهز للتلاعب به قبل تشغيل أي رمز.

ما هو أفضل نهج يجب اتباعه؟

بشكل عام ، من الجيد استخدام document.onload بدلاً من window.onload إذا كنت تحتاج فقط إلى التأكد من تحميل محتوى الصفحة بالكامل قبل تشغيل التعليمات البرمجية الخاصة بك. هذا لأن document.onload سيتم إطلاقه بشكل أسرع من window.onload ، مما قد يؤدي إلى تحسين أداء التعليمات البرمجية الخاصة بك. ومع ذلك ، إذا كنت بحاجة إلى التأكد من تحميل موارد الصفحة (مثل الصور وأوراق الأنماط) بالكامل قبل تشغيل الكود ، فيجب عليك استخدام window.onload بدلاً من ذلك.

كيفية استخدام window.onload مقابل document.onload في JavaScript؟

في المثال المعطى ، سنرى كيف تحدد هذه الأحداث تحميل المستند وتحميل النافذة قبل تشغيل أي كود.

اتصل ب ' document.onload 'الذي يعلمك أنه تم تحميل المستند باستخدام رسالة تنبيه ():

اتصل ب ' window.onload 'وتعيين الرسالة الناتجة لأسلوب التنبيه () إليه:

كما ترى ، عند تحديث الصفحة ، يتم تحميل المستند الأول ، ثم يتم استدعاء طريقة window onload عند انتهاء تحميل الصفحة بالكامل:

هذا كل شيء عن أحداث window.onload و document.onload في JavaScript.

استنتاج

ال ' window.onload ' و ' document.onload 'هما حدثان من أحداث JavaScript للتأكد من تحميل الصفحة بالكامل قبل تنفيذ أي تعليمات برمجية. سيتم تشغيل document.onload بشكل أسرع من window.onload ، مما قد يؤدي إلى تحسين أداء الكود. أظهرت هذه المدونة الفرق بين window.onload و document.onload في JavaScript.