JavaScript判断图片是否加载完成的三种方式
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。
一、load事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" >
<title>img - load event</title>
</head> <body> <p id= "p1" >loading...</p>
<script type= "text/javascript" >
img1.onload = function () {
p1.innerHTML = 'loaded'
}
</script>
</body> </html> |
测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。
二、readystatechange事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" >
<title>img - readystatechange event</title>
</head> <body> <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支持该事件,其它浏览器不支持。
三、img的complete属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" >
<title>img - complete attribute</title>
</head> <body> <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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。