Zusammenfassung der JavaScript-Methoden zur Bestimmung, ob ein Bild geladen wurde

Zusammenfassung der JavaScript-Methoden zur Bestimmung, ob ein Bild geladen wurde_Javascript-Kenntnisse

WBOY

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

Original

5831 Leute haben es durchsucht

Es gibt viele Artikel im Internet darüber, ob ein Bild geladen wurde, aber einige Browser sind nicht geeignet. Der folgende Editor gibt Ihnen eine Zusammenfassung der JavaScript-Methoden zum Feststellen, ob ein Bild geladen wurde lautet wie folgt:

1.Onload-Event

Durch Abhören des Onload-Ereignisses des Bildes können Sie feststellen, ob das Bild mit allen Browsern kompatibel ist (von w3c empfohlene Methode).

<!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>

Nach dem Login kopieren

2. Bestimmen Sie das vollständige Attribut des img-Objekts (DOM)

Wenn das Bild geladen wird, wird das vollständige Objektattribut wahr. Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich habe diese Methode persönlich getestet und sie ist auch mit allen Browsern kompatibel

Three.onreadystatechange-Ereignis

Unter IE verfügt das img-Objekt wie das xhr-Objekt über dieses Ereignis, um festzustellen, ob das Bild geladen ist:

<!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>

Nach dem Login kopieren

Diese Methode ist nur unter IE verfügbar