ما المقصود بتحميل HTML / JS وكيف يعمل؟

يتضمن تحميل صفحة ويب انتظار تحميل محتوى الصفحة والصور والموارد الأخرى بالكامل.

تضمن بعض صفحات الويب عدم حدوث وظائف معينة حتى ينتهي تحميل كل شيء. يتضمن أحد الأمثلة استرداد البيانات من قاعدة بيانات فقط بعد تحميل الصفحة.

هناك طرق مختلفة يمكنك من خلالها التحقق مما إذا كانت صفحة الويب محملة بالكامل. يمكنك الاستماع إلى الأحداث باستخدام معالجات أحداث JavaScript ، واستخدام window.onload حدث JavaScript أو ملف تفريغ سمة HTML.

كيفية استخدام onLoad With the Body HTML Element

يمكنك استخدام أحداث JavaScript للتحقق مما إذا كان قد تم تحميل نص صفحة الويب. ستحتاج إلى ملف HTML به بعض محتويات الصفحة وملف JavaScript لتنفيذ التعليمات البرمجية.

الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT.

1. في ملف HTML جديد يسمى index.html، أضف كود HTML الأساسي التالي:

   لغة البرمجة>
   <لغة البرمجة>
   <رأس>
   <عنوان>مثال على استخدام التحميلعنوان>
   رأس>
   <جسم>
   <h1>مثال باستخدام onload ()h1>
   <ص>يوضح هذا المثال كيفية استخدام حدث onload () في JavaScript.ص>
   جسم>
   لغة البرمجة>

instagram viewer
2. قم بإنشاء ملف جديد في نفس المجلد المسمى script.js. اربط هذا الملف بصفحة HTML الخاصة بك باستخدام علامة البرنامج النصي. يمكنك إضافة علامة البرنامج النصي في الجزء السفلي من علامة النص الأساسي:

   <جسم>
    المحتوى الخاص بك 
   <النصيsrc="script.js">النصي>
   جسم>

3. داخل المحتوى في علامة نص HTML الخاصة بك ، أضف علامة فقرة فارغة.

   <صبطاقة تعريف="انتاج">ص>

4. داخل ملف JavaScript ، أضف الامتداد window.onload وظيفة الحدث. سيتم تنفيذ هذا عند تحميل الصفحة:

   نافذة او شباك.onload = وظيفة() {
   // كود للتشغيل عند تحميل الصفحة
   };

5. داخل الوظيفة ، قم بتعبئة محتوى علامة الفقرة الفارغة. سيؤدي هذا إلى تغيير علامة الفقرة لعرض رسالة فقط عندما يتم تحميل الصفحة:

   وثيقة.getElementById ("انتاج") .innerHTML = "تم تحميل الصفحة!";

6. بدلا من ذلك ، يمكنك أيضا استخدام مستمع الحدث للاستماع إلى DOMContentLoaded حدث. DOMContentLoaded المشغلات قبل window.onload. يتم تشغيله بمجرد أن يصبح مستند HTML جاهزًا ، بدلاً من انتظار تحميل جميع الموارد الخارجية.

   وثيقة.addEventListener ("DOMContentLoaded", وظيفة() {
   وثيقة.getElementById ("انتاج") .innerHTML = "تم تحميل الصفحة!";
   });

7. افتح ملف index.html في متصفح الويب ، لعرض الرسالة عند انتهاء تحميل الصفحة:
8. بدلاً من استخدام أحداث JavaScript للتحقق مما إذا كانت الصفحة قد تم تحميلها ، يمكنك أيضًا استخدام تفريغ سمة HTML لنفس النتيجة. أضف السمة onload إلى علامة النص الأساسي في ملف HTML الخاص بك:

   <جسمتفريغ="فيه()">

9. قم بإنشاء ملف فيه() تعمل داخل ملف JavaScript. لا يوصى باستخدام سمة onload HTML وحدث JavaScript في نفس الوقت. قد يؤدي القيام بذلك إلى سلوك غير متوقع أو تضارب بين الوظيفتين.

   وظيفةفيه() {
   وثيقة.getElementById ("انتاج") .innerHTML = "تم تحميل الصفحة!";
   }

نوصي باستخدام مستمعي أحداث JavaScript و window.onload طريقة عبر HTML تفريغ السمة لأن الاحتفاظ بسلوك صفحة الويب ومحتواها بشكل منفصل هو ممارسة جيدة. أيضًا ، توفر أدوات استماع أحداث JavaScript مزيدًا من التوافق والمرونة مقارنة بالطريقتين الأخريين.

كيفية استخدام onLoad With Image HTML Element

يمكنك أيضًا استخدام حدث onload لتنفيذ التعليمات البرمجية عند تحميل عناصر أخرى على الصفحة. مثال على ذلك هو عنصر الصورة.

1. داخل نفس المجلد مثل ملف index.html ، أضف أي صورة.
2. داخل ملف HTML ، أضف علامة صورة ، واربط السمة src باسم الصورة المحفوظة في المجلد.

   <IMGبطاقة تعريف="صورتي"src="Pidgeymon.png"عرض="300">

3. أضف علامة فقرة فارغة أخرى لعرض رسالة عند تحميل الصورة:

   <صبطاقة تعريف="imageLoadedMessage">ص>

4. داخل ملف JavaScript ، أضف حدث onload على الصورة. استخدم المعرف الفريد صورتي لتحديد عنصر الصورة المراد إضافة حدث onload إليه:

   فار myImage = وثيقة.getElementById ("صورتي");
   myImage.onload = وظيفة() {
   
   };

5. داخل حدث onload ، قم بتغيير HTML الداخلي لإضافة ملف تم تحميل الصورة رسالة:

   وثيقة.getElementById ("imageLoadedMessage") .innerHTML = "تم تحميل الصورة!";

6. بدلا من استخدام ملفات myImage.onload، يمكنك أيضًا استخدام مستمع الحدث للاستماع إلى ملف حمولة حدث JavaScript:

   myImage.addEventListener ('حمولة', وظيفة() {
   وثيقة.getElementById ("imageLoadedMessage") .innerHTML = "تم تحميل الصورة!";
   });

7. افتح index.html في متصفح الويب لعرض الصورة والرسالة:
8. للحصول على نفس النتيجة ، يمكنك أيضًا استخدام خاصية onload HTML. على غرار علامة النص الأساسي ، أضف سمة onload إلى علامة img:

   <IMGبطاقة تعريف="صورتي"src="Pidgeymon.png"عرض="300"تفريغ="imageLoaded ()">

9. أضف الوظيفة في ملف JavaScript ، لتنفيذ التعليمات البرمجية عند تحميل الصورة:

   وظيفةتحميل الصورة() {
   وثيقة.getElementById ("imageLoadedMessage") .innerHTML = "تم تحميل الصورة!";
   }

كيفية استخدام onLoad عند تحميل JavaScript

يمكنك استخدام سمة HTML onload للتحقق مما إذا كان المتصفح قد انتهى من تحميل ملف JavaScript. لا يوجد حدث JavaScript onload مكافئ لعلامة البرنامج النصي.

1. أضف سمة onload إلى علامة البرنامج النصي في ملف HTML الخاص بك.

   <النصيsrc="script.js"تفريغ="LoadedJs ()">النصي>

2. أضف الوظيفة إلى ملف JavaScript الخاص بك. طباعة رسالة عن طريق تسجيل الدخول إلى وحدة تحكم المتصفح:

   وظيفةتحميل() {
   وحدة التحكم.سجل("تم تحميل JS بواسطة المتصفح!");
   }

3. افتح ملف index.html في المتصفح. أنت تستطيع استخدام Chrome DevTools لعرض أي رسائل يتم إخراجها في وحدة التحكم.

تحميل صفحات الويب في المستعرض

يمكنك الآن استخدام الوظائف والأحداث لتنفيذ تعليمات برمجية معينة عند اكتمال تحميل صفحة الويب. يعد تحميل الصفحات عاملاً كبيرًا في إنشاء تجربة مستخدم سلسة وسلسة.

يمكنك معرفة المزيد حول كيفية دمج تصميمات صفحات التحميل الأكثر إثارة للاهتمام في موقع الويب الخاص بك.