由于IE7、IE8之类的浏览器兼容性实在太差,经过测试,在使用图片预加载技术时,对JQuery的load事件,Image对象的onload事件,由于缓存的原因不会执行,导致程序在页面后退,或者动态生成过程中显示不正常。实在郁闷,把这些用户都排除在外又显得不人道。
经测试,类似如下写法,都有问题:
JQuery 写法:
1
2
3
4
5
|
Javascript 写法:
1
2
3
4
|
这些写法在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函数要写在闭包函数外面。