正文
JS判断图片是否加载完成三种方式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.img的complete属性
轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
function imgLoad(img, callcack) {
var timer = setInterval(function () {
if (img.complete) {//判断图片是否加载完成
callcack(img)
clearInterval(timer);
}
}, 50);
}
imgLoad(img1, function () {
p1.innerHTML = '加载完成';
});
</script>
判断图片是否在缓存中已经存在
<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<img id="img2" />
<script>
//证明complete 属性不仅可以判断图片是否加载成功，还可以判断图片是否已经在缓存中存在
console.info(img1.complete)
setTimeout(function () {
if (img1.complete) {
console.info('加载成功' + img1.src);
img2.src = img1.src;
if (img2.complete) {
console.info('img2加载成功');
}
} else { }
}, 100);
</script>
2.Load事件
<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
//图片加载成功触发事件
img1.onload = function () {
alert(3);
p1.innerHTML = "图片加载成功";
}
</script>
测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件
3.readystatechange事件
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
<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>
