في بعض الأحيان في أعمال التطوير الأمامية ، من أجل الحصول على معلومات الصورة ، نحتاج إلى الحصول على حجم وحجم الصورة بشكل صحيح بعد تحميل الصورة ، وتنفيذ وظيفة رد الاتصال المقابلة لجعل الصورة تنتج تأثير عرض معين. تنظم هذه المقالة بشكل أساسي العديد من الأساليب الشائعة للحكم على إكمال تحميل الصور ، وتشرحها وتشرحها من خلال مزيج من التعليمات البرمجية والتطبيقات العملية.
طريقة التحميل
قم بتنفيذ رمز Javascipt اللاحق عن طريق إضافة سمة OnLoad إلى علامة IMG وملء الوظيفة المقابلة. في مثال الكود التالي ، لا يتم عرض عنصر IMG افتراضيًا. يتم تحديده بواسطة Onload يتم عرض الصورة بعد اكتمال التحميل.
نسخة الكود كما يلي:
<img onload = "get (this)" src = "..." style = 'display: none' />
<script type = "text/javaScript">
وظيفة الحصول على (ts) {
ts.style.display = 'block' ؛ // عرض الصور
}
</script>
المزايا: يمكن وضع قسم رمز JavaScript على أي جزء من الصفحة لتحميله ، ويمكن استخدامه في معظم الصور التعسفية. إنها بسيطة نسبيًا الاستخدام وسهلة الفهم.
العيوب: يجب نشر سمة OnLaod على كل علامة ، وهو ما لا ينطبق في بعض الحالات التي لا يمكن معالجة رمز HTML مباشرة أو إذا كان المطلوب تبسيطه.
طريقة Javascipt الأصلية
حدد الصورة مع المعرف المحدد ، وحدد طريقة رد الاتصال من خلال Onload ، ومطالبة مع كلمة "تحميل الصورة المكتملة" تظهر بعد تحميل الصورة.
نسخة الكود كما يلي:
<img id = "pic1" src = "..." />
<script language = "javaScript">
document.getElementById ("pic1"). Onload = function () {
تنبيه ("تحميل الصور المكتمل") ؛
}
</script>
المزايا: بسيطة وسهلة الاستخدام ، دون التأثير على رمز HTML.
العيوب: يمكن تحديد عنصر واحد فقط ، ويجب وضع رمز Javascipt أسفل عنصر الصورة
طريقة jQuery
لكل حدث ربط عناصر صورة مع فئة PIC1 ، يظهر العنصر تدريجياً من خلال طريقة تحميل jQuery.
لاحظ أنه لا يربط حدث التحميل في $ (وثيقة) .READY ().
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ (function () {
$ ('. pic1'). كل (وظيفة () {
$ (this) .load (function () {
$ (هذا) .fadein () ؛
}) ؛
}) ؛
})
</script>
المزايا: يمكن ربط أحداث العناصر على دفعات ولا تؤثر على محتوى رمز HTML
العيوب: مطلوب دعم مكتبة jQuery ، ويجب وضع الرمز أسفل العنصر الذي يجب تشغيله.