本文汇总了JavaScript中判断图片是否加载完成的三种常用方法。包括W3C推荐的onload事件、利用img对象的complete属性轮询检测，以及IE浏览器特有的onreadystatechange事件。文章提供了具体代码示例，并说明了各方法的浏览器兼容性情况，帮助开发者根据实际需求选择合适方案。
JavaScript判断图片加载完成的三种方法
网络上关于判断图片是否加载完成的教程众多，但部分方案在不同浏览器中表现不一。本文将介绍几种JavaScript实现图片加载状态检测的方法，并附上具体代码示例供参考。
使用onload事件
一、使用onload事件
通过监听图片的onload事件，可以准确判断图片是否加载完成。这是W3C推荐的做法，且兼容所有主流浏览器。具体代码示例如下：
<!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> 检查img对象的complete属性
二、检查img对象的complete属性
当图片加载完成后，img对象的complete属性值会变为true。可以通过轮询该属性来判断加载状态，代码示例如下：
<!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> 经测试，该方法同样兼容所有浏览器。
使用onreadystatechange事件
三、使用onreadystatechange事件
在IE浏览器中，img对象与XMLHttpRequest对象类似，均支持onreadystatechange事件。通过监听该事件可以判断图片加载状态，代码示例如下：
<!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> 需要注意的是，该方法仅在IE浏览器中有效。