cari

Rumah >hujung hadapan web >tutorial js >Ringkasan kaedah JavaScript untuk menentukan sama ada imej telah dimuatkan_kemahiran javascript

Ringkasan kaedah JavaScript untuk menentukan sama ada imej telah dimuatkan_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:16:035824semak imbas

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>

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>

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>

Kaedah ini hanya tersedia di bawah IE

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Melaksanakan tetingkap pop timbul klik imej berdasarkan JavaScript dan bukannya kemahiran saving_javascriptArtikel seterusnya：Melaksanakan tetingkap pop timbul klik imej berdasarkan JavaScript dan bukannya kemahiran saving_javascript

Artikel berkaitan

Lihat lagi