Summary of JavaScript methods to determine whether an image has been loaded

Summary of JavaScript methods to determine whether an image has been loaded_javascript skills

WBOY

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

Original

5809 people have browsed it

There are many articles on the Internet about determining whether an image has been loaded, but some browsers are not suitable. The following editor will share with you some summary of JavaScript methods for determining whether an image has been loaded. The specific content is as follows:

1.onload event

By listening to the onload event of the image, you can determine whether the image has been loaded. It is compatible with all browsers (w3c recommended method). The code example is as follows

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

Copy after login

2. Determine the complete attribute of the img object (DOM)

When the img is loaded, the complete object attribute will become true. The code example is as follows:

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

Copy after login

Personally tested this method and it is also compatible with all browsers

Three.onreadystatechange event

Under IE, the img object has the onreadystatechange event like the xhr object. You can use this event to determine whether the image is loaded. The code example is as follows:

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

Copy after login

This method is only available under IE