Javascript JQuery 图片预加载load事件IE不兼容的问题的解决方法

由于IE7、IE8之类的浏览器兼容性实在太差,经过测试,在使用图片预加载技术时,对JQuery的load事件,Image对象的onload事件,由于缓存的原因不会执行,导致程序在页面后退,或者动态生成过程中显示不正常。实在郁闷,把这些用户都排除在外又显得不人道。

经测试,类似如下写法,都有问题:

JQuery 写法:

1
2
3
4
5
$( "<img>" ,{
   src:  "http://www..." ,
   load: function (e){
   }
});

Javascript 写法:

1
2
3
4
var  img =  new  Image();
img.src =  "http://www..." ;
img.onload =  function (){
}

这些写法在IE10,以及Firefox,Chrome里都能运行正常,但IE8及以下就不行了,网上找了很多源码,基本都是这种方法,全没用。

经过不断测试,总算有找到了解决方案,分享给大家。

HTML代码:

1
< div  id = "pic_loader"  style = "visibility:hidden;width:0px; height:0px; overflow:hidden;" ></ div >

*注意 overflow:hidden 属性非常重要,如果不溢出的话,得不到Img的属性


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function  load_pic(obj_id,src){
   var  img_str =  "<img border=0 src=\""  + src +  "\" onload=\"pic_onload("  + obj_id+  ",'"  + src +  "',"  + max_width+  ",this);\" />" ;
   var  loader = document.getElementById( "pic_loader" );
   loader.innerHTML += img_str;
}
    
function  pic_onload(obj_id,src,max_width,obj){
   if (obj.width > max_width){
   $( "#"  + obj_id).width(max_width);
   $( "#"  + obj_id).height(max_width);
   $( "#"  + obj_id).attr( "src" ,src);
} else {
   $( "#"  + obj_id).attr( "src" ,src);
}
   obj.parentNode.removeChild(obj);
}

因为我的函数目的是超过最大值就显示最大值,不足最大值就大小不变。只是说明原理,大家理解就行。


另外在与JQuery结合时,需要注意,如果load_pic 写在闭包函数 $(function(){ ... }); 内部的话,pic_onload函数要写在闭包函数外面。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值