طريقة JS:
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var username = "xiaoming" ؛
تنبيه (اسم المستخدم) ؛
}
</script>
فيما يلي طريقة jQuery ، ويجب الرجوع إلى ملف jQuery.
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ (وثيقة). ready (function () {
var username = "xiaoming" ؛
تنبيه (اسم المستخدم) ؛
}) ؛
</script>
أو اختصار
نسخة الكود كما يلي:
$ (function () {
var username = "xiaoming" ؛
تنبيه (اسم المستخدم) ؛
}) ؛
عندما يتم تحميل DOM ، يمكن تنفيذها (في وقت سابق من Window.onload). يمكن أن يظهر عدة مرات في نفس الصفحة. ready ()
ملاحظة: الفرق الرئيسي بين الاثنين
window.onload:
يتم تشغيل حدث Window.onload فقط عندما يتم تنزيل المستند بالكامل في المتصفح. هذا يعني أن جميع العناصر الموجودة على الصفحة قابلة للتشغيل لـ JS ، مما يعني أنه سيتم تنفيذ جميع العناصر الموجودة على الصفحة فقط بعد تحميلها. هذا الموقف مفيد للغاية لكتابة الكود الوظيفي لأن ترتيب التحميل لا يعتبر. و
$ (وثيقة). ready {}:
سيتم استدعاؤه عندما يكون DOM جاهزًا تمامًا ومتاحًا. على الرغم من أن هذا يعني أيضًا أن جميع العناصر متاحة للبرنامج النصي ، إلا أنه لا يعني أنه تم تنزيل جميع الملفات المرتبطة. بمعنى آخر ، سيتم تنفيذ الكود بعد اكتمال تنزيل HMTL وتحليله في شجرة DOM.
لإعطاء مثال:
افترض أن هناك صفحة تمثل المعرض ، والتي قد تحتوي على العديد من الصور الكبيرة التي يمكننا إخفاءها أو عرضها أو معالجتها من خلال jQuery. إذا قمنا بتعيين الواجهة من خلال صفحة OnLoad ، فيجب على المستخدم الانتظار حتى يتم تنزيل كل صورة قبل أن يتمكن من استخدام هذه الصفحة. والأسوأ من ذلك ، إذا تمت إضافة السلوك قليلاً إلى العناصر ذات السلوك الافتراضي (مثل الروابط) ، فقد يؤدي تفاعل المستخدم إلى نتائج غير متوقعة. ومع ذلك ، عندما نحاول تعيينه باستخدام $ (وثيقة) .READY () {} ، ستقوم هذه الواجهة بإعداد السلوك الصحيح المتاح سابقًا.
يعد استخدام $ (وثيقة) .Ready () {} أفضل بشكل عام من محاولة معالجات الأحداث على التحميل ، ولكن يجب أن يكون واضحًا أنه نظرًا لعدم اكتمال ملف الدعم حتى الآن ، قد لا تكون خصائص مثل ارتفاع وعرض الصورة صالحة في هذا الوقت.
ملاحظة: ستكون هناك مشاكل في استخدام طريقة وضع JS في الجزء السفلي من الصفحة وطريقة استخدام Defer = "تأجيل". من الأفضل استخدام الوظيفة أعلاه!