判断图片是否加载完成有三种方式。
一、load事件
img.onload =
function
() {
alert('加载完毕');
}
测试,所有浏览器都显示出了“加载完毕”,说明所有浏览器都支持img的load事件。
二、readystatechange事件
img.onreadystatechange =
function
() {
if
(img.readyState==
"complete"
||img.readyState==
"loaded"
){
alert('加载完毕
')
}
}
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。
三、complete属性
function
imgLoad(img, fn) {
var
timer = setInterval(
function
() {
if
(img.complete) {
fn()
}
}, 50)
}
imgLoad(img,
function
() {
alert(
'加载完毕'
);
})
轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。