Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:16:03
Original
5809 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


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage