来源:https://blog.csdn.net/codingnoob/article/details/78683835
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。
一、load事件
1
2
3
4
5
|
<script type=
"text/javascript"
>
$(
'img'
).onload =
function
() {
//code
}
</script>
|
优点:简单易用,不影响HTML代码。
缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方
二、jquery方法
1
2
3
4
5
6
7
8
9
|
<script type=
"text/javascript"
>
$(
function
(){
$(
'.pic1'
).each(
function
() {
$(
this
).load(
function
(){
$(
this
).fadeIn();
});
});
})
</script>
|
注意,不要在$(document).ready()里绑定load事件。
优点:可以批量绑定元素事件,并且不影响HTML代码内容
缺点:需要jquery库的支持,代码需要放置到需要操作元素的下方。
三、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-"
>
<title>img - readystatechange event</title>
</head>
<body>
<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属性
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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
以上内容是小编给大家介绍的JS判断图片是否加载完成方法汇总,希望对大家有所帮助,同时也非常感谢大家对脚本之家网站的支持!
var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
// 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
// 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
// 查找所有封面图,迭代处理
$('.cover').each(function(){
// 找到为0就将isLoad设为false,并退出each
if(this.height === 0){
isLoad = false;
return false;
}
});
// 为true,没有发现为0的。加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
// 为false,因为找到了没有加载完成的图,将调用定时器递归
}else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
}
}