js判断网页是否加载完毕----包括图片

在做页面的时候,经常碰到要在页面加载完全之后再去展现。这时候我们会直接想到使用window.onload的方式,或者是采用Jquery的ready方法判断,这在一定程度可以搞定。

 

window.onload方式

window.onload =function()
{
    //your code  
}

  

Jquery的ready方法

//: 判断网页是否加载完成     
           document.onreadystatechange = function () {      
               if(document.readyState=="complete") {            
                   document.getElementById('divprogressbar').style.display='none';      
               }     
           } 

 

;(function($,undefined){
    $(function(){
    //your code
    });
})(window.jQuery);

 

但是上面的方法只能判断Dom的加载状态,不能判断图片是否加载成功。如果碰到页面需要图片加载完成才能展现的情况,我们就无法搞定了。

现提供两种方式判断图片是否加载完成。

 

使用onload的图片加载事件检测

 

 

这里是使用onload和onerror检测判断,但是有时候不能检测到图片是否加载完成,再使用过程中,我发现它只是判断所有图片开始加载时就触发了,不过基本可以满足需求。

 

使用complete的图片属性检测

 

这里我们采用定时器不断检测图片的complete属性,这个比较完美,只有图片确实加载完成时,才会变成真,所以比较可靠,建议采用。

 参考出处:http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html

====================================================================

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示:

一.onload事件

通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<script>
// 方法一:图片已经下载完
document.getElementById( 'img1' ).onload = function (e){
e.stopPropagation();
alert(1);
}
</script>
</body>
</html>

二.判断img对象(DOM)的complete属性

当img加载完成之后,complete对象属性将变为true,代码示例如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<script>
// 方法二:img的complate属性
var timer = setInterval( function (){
if (document.getElementById( 'img1' ).complete){
clearInterval(timer);
alert(1);
console.log(document.getElementById( 'img1' ).complete)
}
}, 10);
</script>
</body>
</html>

亲测该方法同样可兼容所有浏览器

三.onreadystatechange事件

在ie下,img对象与xhr对象一样具有onreadystatechange事件,可以通郭建廷该事件判断图片是否加载完成,代码示例如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<script>
document.getElementById( 'img1' ).onreadystatechange = function () {
if (document.getElementById( 'img1' ).readyState== "complete" ||document.getElementById( 'img1' ).readyState== "loaded" ){
alert(1);
}
}
</script>
</body>
</html>

该方法仅在ie下可用

参考出处:http://www.jb51.net/article/79233.htm

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值