Terkadang Anda perlu mendapatkan ukuran gambar, yang hanya perlu dimuat setelah gambar dimuat. Temukan metodenya?
1. Muat acara
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> IMG - Load Event </iteme>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> memuat ... </p>
<type skrip = "Teks/JavaScript">
img1.onload = function () {
p1.innerhtml = 'dimuat'
}
</script>
</body>
</html>
Uji, semua browser menunjukkan "dimuat", menunjukkan bahwa semua browser mendukung IMG Load Event.
2. Acara ReadyStateChange
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> IMG - Event ReadyStateChange </iteme>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> memuat ... </p>
<type skrip = "Teks/JavaScript">
img1.onreadystatechange = function () {
if (img1.readystate == "complete" || img1.readystate == "dimuat") {
p1.innerhtml = 'readystatechange: dimuat'
}
}
</script>
</body>
</html>
ReadyState lengkap dan dimuat, yang berarti gambar telah dimuat. Menguji bahwa IE6-IE10 mendukung acara ini, tetapi browser lain tidak.
AKU AKU AKU. Atribut lengkap IMG
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> img - atribut lengkap </iteme>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> memuat ... </p>
<type skrip = "Teks/JavaScript">
fungsi imGload (img, callback) {
var timer = setInterval (function () {
if (img.complete) {
Callback (IMG)
ClearInterval (timer)
}
}, 50)
}
imGload (img1, function () {
p1.innerhtml ('dimuat')
})
</script>
</body>
</html>
Polling terus menerus memantau atribut lengkap IMG. Jika benar, itu berarti gambar telah dimuat dan pemungutan suara dihentikan. Properti ini didukung oleh semua browser.