本文汇总了JavaScript中判断图片加载完成的四种常用方法，包括原生load事件、jQuery的load方法、readystatechange事件以及轮询complete属性。详细分析了各方法的优缺点及浏览器兼容性，帮助开发者根据实际需求选择最合适的方案。
JS判断图片加载完成方法汇总
在某些场景下，我们需要获取图片的具体尺寸，而这一操作必须在图片资源完全加载后才能执行。为了帮助开发者解决这一问题，下面整理了多种通过JavaScript判断图片是否加载完成的技术方案，供参考使用。
方法一：利用load事件
一、利用load事件
<script type="text/javascript">
$('img').onload = function() {
//code
}
</script> 该方法的优势在于实现简单，且不会干扰原有的HTML结构。
其局限性在于每次只能针对单个元素进行监听，且相关的JavaScript代码必须放置在图片标签之后执行。
方法二：使用jQuery方法
二、使用jQuery方法
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script> 需要注意的是，不应在$(document).ready()回调函数内部绑定load事件。
优点：支持对多个元素批量绑定事件监听，且不改变HTML代码结构。 缺点：依赖jQuery库的支持，且相关代码需放置在目标操作元素的下方。
方法三：监听readystatechange事件
三、监听readystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-">
<title>img - readystatechange event</title>
</head>
<body>
<img id="img" src="http://pic.win.com/wallpaper/f/cbbaea.jpg">
<p id="p">loading...</p>
<script type="text/javascript">
img.onreadystatechange = function() {
if(img.readyState=="complete"||img.readyState=="loaded"){
p.innerHTML = 'readystatechange:loaded'
}
}
</script>
</body>
</html> 当图片的readyState属性值为complete或loaded时，表示图片已加载完毕。经测试，该事件在IE6至IE10浏览器中有效，但在其他现代浏览器中并不支持。
方法四：检查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，即表明图片加载完成，此时停止轮询。此方法在所有主流浏览器中均得到支持。
以上内容是关于JS判断图片加载完成方法的汇总介绍，希望能为读者提供实用帮助，同时也感谢大家对本网站的支持！