本文介绍在JavaScript中判断图片是否加载完成的三种常用方式。第一种利用img的load事件，兼容性良好；第二种通过监听readystatechange事件并检查readyState状态，主要适用于IE浏览器；第三种则是轮询监测img的complete属性，适用于所有现代浏览器。文章提供了具体的代码示例与兼容性说明，帮助开发者根据需求选择合适方案。
JavaScript判断图片加载完成的三种方法：load、readystatechange与complete属性
在实际开发中，获取图片尺寸通常依赖于图片加载完成后的状态。为了实现这一目标，可以采用以下三种不同的技术手段，本文将逐一进行解析。
第一种方法：利用load事件
第一种方法：利用load事件
具体实现代码示例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onload = function() {
p1.innerHTML = 'loaded'
}
</script>
</body>
</html>经过测试，该方式在所有主流浏览器中均能正常显示“loaded”字样，证明各浏览器均支持img元素的load事件。
第二种方法：利用readystatechange事件
第二种方法：利用readystatechange事件
具体实现代码示例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - readystatechange event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onreadystatechange = function() {
if(img1.readyState=="complete"||img1.readyState=="loaded"){
p1.innerHTML = 'readystatechange:loaded'
}
}
</script>
</body>
</html>当readyState属性值为complete或loaded时，表示图片加载完毕。测试结果显示，IE6至IE10浏览器支持此事件，而其他非IE浏览器则不支持。
第三种方法：监测img的complete属性
第三种方法：监测img的complete属性
具体实现代码示例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1, function() {
p1.innerHTML('加载完毕')
})
</script>
</body>
</html>该方法通过定时器不断轮询检测img的complete属性，一旦该属性为true，即判定图片加载完成并停止轮询。此属性在所有浏览器中均得到支持。
