บางครั้งคุณต้องได้รับขนาดของภาพซึ่งจะต้องโหลดหลังจากโหลดภาพเท่านั้น ค้นหาวิธีการ?
1. เหตุการณ์โหลด
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> img - โหลดเหตุการณ์ </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> การโหลด ... </p>
<script type = "text/javascript">
img1.onload = function () {
p1.innerhtml = 'โหลด'
-
</script>
</body>
</html>
ทดสอบเบราว์เซอร์ทั้งหมดแสดง "โหลด" ซึ่งระบุว่าเบราว์เซอร์ทั้งหมดรองรับเหตุการณ์การโหลด IMG
2. กิจกรรม ReadyStateChange
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<tite> img - กิจกรรม ReadyStateChange </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> การโหลด ... </p>
<script type = "text/javascript">
img1.onreadyStateChange = function () {
if (img1.readystate == "เสร็จสมบูรณ์" || img1.readystate == "โหลด") {
p1.innerhtml = 'ReadyStateChange: โหลด'
-
-
</script>
</body>
</html>
ReadyState เสร็จสมบูรณ์และโหลดซึ่งหมายความว่าภาพได้รับการโหลดแล้ว การทดสอบว่า IE6-IE10 รองรับกิจกรรมนี้ แต่เบราว์เซอร์อื่นไม่ทำ
iii. คุณลักษณะที่สมบูรณ์ของ IMG
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> img - แอตทริบิวต์ที่สมบูรณ์ </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> การโหลด ... </p>
<script type = "text/javascript">
ฟังก์ชั่น imgload (img, callback) {
var timer = setInterval (ฟังก์ชัน () {
ถ้า (img.complete) {
การโทรกลับ (IMG)
ClearInterval (ตัวจับเวลา)
-
}, 50)
-
imgload (img1, function () {
p1.innerhtml ('โหลด')
-
</script>
</body>
</html>
การสำรวจอย่างต่อเนื่องตรวจสอบคุณลักษณะที่สมบูรณ์ของ IMG ถ้าเป็นจริงก็หมายความว่าภาพได้รับการโหลดและการสำรวจจะหยุดลง คุณสมบัตินี้ได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมด