suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der JavaScript-Methoden zur Bestimmung, ob ein Bild geladen wurde_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 15:16:035825Durchsuche

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>

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>
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>
Diese Methode ist nur unter IE verfügbar


Stellungnahme：
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
Vorheriger Artikel：Implementierung eines Bildklick-Popup-Fensters basierend auf JavaScript anstelle von saving_javascript-KenntnissenNächster Artikel：Implementierung eines Bildklick-Popup-Fensters basierend auf JavaScript anstelle von saving_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen