Ringkasan kaedah JavaScript untuk menentukan sama ada imej telah dimuatkan

Ringkasan kaedah JavaScript untuk menentukan sama ada imej telah dimuatkan_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:16:03

asal

5824 orang telah melayarinya

Terdapat banyak artikel di Internet tentang menentukan sama ada imej telah dimuatkan, tetapi sesetengah penyemak imbas tidak sesuai. Editor berikut akan berkongsi dengan anda beberapa ringkasan kaedah JavaScript untuk menentukan sama ada imej telah dimuatkan adalah seperti berikut:

1.memuat acara

Dengan mendengar peristiwa pemuatan imej, anda boleh menentukan sama ada imej itu telah dimuatkan dengan semua penyemak imbas (kaedah yang disyorkan w3c adalah seperti berikut
).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
// 方法一：图片已经下载完
document.getElementById('img1').onload = function(e){
e.stopPropagation();
alert(1);
}
</script>
</body>
</html>

Salin selepas log masuk

2. Tentukan atribut lengkap objek img (DOM)

Apabila img dimuatkan, atribut objek lengkap akan menjadi benar Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
// 方法二：img的complate属性
var timer = setInterval(function(){
if (document.getElementById('img1').complete){
clearInterval(timer);
alert(1);
console.log(document.getElementById('img1').complete)
}
}, 10);
</script>
</body>
</html>

Salin selepas log masuk

Kaedah ini diuji secara peribadi dan ia juga serasi dengan semua penyemak imbas

Acara tiga.onreadystatechange

Di bawah IE, objek img mempunyai acara onreadystatechange seperti objek xhr Anda boleh menggunakan peristiwa ini untuk menentukan sama ada imej itu dimuatkan Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
document.getElementById('img1').onreadystatechange = function() {
if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){
alert(1);
}
}
</script>
</body>
</html>

Salin selepas log masuk

Kaedah ini hanya tersedia di bawah IE