في بعض الأحيان تحتاج إلى الحصول على حجم الصورة ، والتي يجب تحميلها بعد تحميل الصورة. أدناه ، قام المحرر بتجميع ملخص لعدة طرق للحكم على صورة JS. دعونا نلقي نظرة.
1. الحدث الحمل
<script type = "text/javaScript"> $ ('img'). onload = function () {// code} </script>المزايا: بسيطة وسهلة الاستخدام ، دون التأثير على رمز HTML.
العيوب: يمكن تحديد عنصر واحد فقط ، ويجب وضع رمز Javascipt أسفل عنصر الصورة
2. طريقة jQuery
<script type = "text/javaScript"> $ (function () {$ ('. pic1'). كل (function () {$ (this) .Load (function () {$ (this) .fadein () ؛}) ؛}) ؛}) </script>لاحظ أنه لا يربط حدث التحميل في $ (وثيقة) .READY ().
المزايا: يمكن ربط أحداث العناصر على دفعات ولا تؤثر على محتوى رمز HTML
العيوب: مطلوب دعم مكتبة jQuery ، ويجب وضع الرمز أسفل العنصر الذي يجب تشغيله.
3. ReadyStateChange حدث
<! doctype html> <html> <head> <meta charset = "utf -"> <title> img - readyStateChange event </title> </head> <body> <img id = "img" src = "http://pic.win.com/wallpaper/f/cbba.jpg type = "text/javaScript"> img.OnReadyStateChange = function () {if (img.ReadyState == "COMMUNT" || img.ReadyState == "Loaded") {P.InnerHtml = 'ReadyStateChange: loaded'}} </sprict> </body> </html>ReadyState كاملة وتحميلها ، مما يعني أنه تم تحميل الصورة. اختبار أن IE6-IE10 يدعم هذا الحدث ، لكن المتصفحات الأخرى لا تفعل ذلك.
4. السمة الكاملة لـ IMG
<! doctype html> <html> <head> <meta charset = "utf -8"> <title> IMG - سمة كاملة </title> </head> <body> <img id = "img1" src = "http://pic1.win4000.com/wallpaper/51c3b9a9a> <pg1. id = "p1"> loading ... </p> <script type = "text/javaScript"> function imgload (img ، callback) {var timer = setInterval (function () {if (img.complete) {callback (img) clearinterval (timer)} ، 50)} imgload (img1 ، function () {p1.innerhtml ('loaded')}) </script> </body> </html>يراقب الاقتراع باستمرار السمة الكاملة لـ IMG. إذا كان هذا صحيحًا ، فهذا يعني أنه تم تحميل الصورة وتوقف الاقتراع. هذه الخاصية مدعومة من قبل جميع المتصفحات.
المحتوى أعلاه هو ملخص لطريقة JS لتحديد ما إذا كان المحرر قد تم تحميله بواسطة المحرر. آمل أن يكون ذلك مفيدًا للجميع. في الوقت نفسه ، أود أن أشكرك كثيرًا على دعمكم لموقع Wulin Network!