บางครั้งคุณต้องได้รับขนาดของภาพซึ่งจะต้องโหลดหลังจากโหลดภาพ ด้านล่างตัวแก้ไขได้รวบรวมบทสรุปของวิธีการหลายวิธีในการตัดสินว่ามีการโหลดอิมเมจ JS หรือไม่ มาดูกันเถอะ
1. เหตุการณ์โหลด
<script type = "text/javascript"> $ ('img'). onLoad = function () {// code} </script>ข้อดี: ง่ายและใช้งานง่ายโดยไม่ส่งผลกระทบต่อรหัส HTML
ข้อเสีย: สามารถระบุองค์ประกอบเดียวเท่านั้นและรหัส javascipt จะต้องวางไว้ด้านล่างองค์ประกอบภาพ
2. วิธี jQuery
<script type = "text/javascript"> $ (function () {$ ('. pic1'). แต่ละ (ฟังก์ชั่น () {$ (นี่) .load (function () {$ (นี้) .fadein ();});});}) </script>โปรดทราบว่าอย่าผูกเหตุการณ์โหลดใน $ (เอกสาร) .ready ()
ข้อดี: เหตุการณ์องค์ประกอบสามารถผูกมัดเป็นแบทช์และไม่ส่งผลกระทบต่อเนื้อหารหัส HTML
ข้อเสีย: จำเป็นต้องมีการสนับสนุนของไลบรารี jQuery และรหัสจะต้องวางไว้ด้านล่างองค์ประกอบที่ต้องดำเนินการ
3. กิจกรรม ReadyStateChange
<! doctype html> <html> <head> <meta charset = "utf -"> <title> img - เหตุการณ์ ReadyStateChange </title> </head> <body> <img id = "img" src = "http://pic.win.com/wallpaper type = "text/javascript"> img.onreadystatechange = function () {ถ้า (img.readystate == "เสร็จสมบูรณ์" || img.readystate == "โหลด") {p.innerhtml = 'ReadyStatechange: โหลด'}} </script>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/f/51c3ba2 id = "p1"> การโหลด ... </p> <script type = "text/javascript"> ฟังก์ชั่น imgload (img, callback) {var timer = setInterval (ฟังก์ชัน () {ถ้า (img.complete) {callback (img) clearinterval (timer)}}, 50) {p1.innerhtml ('โหลด')}) </script> </body> </html>การสำรวจอย่างต่อเนื่องตรวจสอบคุณลักษณะที่สมบูรณ์ของ IMG ถ้าเป็นจริงก็หมายความว่าภาพได้รับการโหลดและการสำรวจจะหยุดลง คุณสมบัตินี้ได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมด
เนื้อหาข้างต้นเป็นบทสรุปของวิธี JS เพื่อตรวจสอบว่าภาพถูกโหลดโดยตัวแก้ไขหรือไม่ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ในเวลาเดียวกันฉันขอขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!