Résumé des méthodes JavaScript pour déterminer si une image a été chargée

Résumé des méthodes JavaScript pour déterminer si une image a été chargée_javascript skills

WBOY

Libérer： 2016-05-16 15:16:03

original

5809 Les gens l'ont consulté

Il existe de nombreux articles sur Internet permettant de déterminer si une image a été chargée, mais certains navigateurs ne sont pas adaptés. L'éditeur suivant partagera avec vous un résumé des méthodes JavaScript permettant de déterminer si une image a été chargée. est le suivant :

1.événement onload

En écoutant l'événement onload de l'image, vous pouvez déterminer si l'image a été chargée. Elle est compatible avec tous les navigateurs (méthode recommandée par le w3c). L'exemple de code est le suivant
.

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

Copier après la connexion

2. Déterminez l'attribut complet de l'objet img (DOM)

Lorsque l'img est chargé, l'attribut d'objet complet deviendra vrai. L'exemple de code est le suivant :

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

Copier après la connexion

Testé personnellement cette méthode et elle est également compatible avec tous les navigateurs

Événement Three.onreadystatechange

Sous IE, l'objet img a l'événement onreadystatechange comme l'objet xhr Vous pouvez utiliser cet événement pour déterminer si l'image est chargée. L'exemple de code est le suivant :

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

Copier après la connexion

Cette méthode est uniquement disponible sous IE