这几天闲来无事,就爱倒弄倒弄代码,写了个动态加载图片的方法,因为在判断图片时候加载完成这个操作在一些不支持onload事件的浏览器里(Fuck IE6,IE7)使用了轮询查询图片的width和height是否可取来隐藏提示信息,不过这种方式在网速比较慢的时候会出现一个难顶的现象:就是图片一行一行加载,可是提示信息已经隐藏了。下面看源代码和示例:
[javascript]
/*
* @author Shanpeng
* @website:http://www.ilovejs.net
* @e-mail:supersha@foxmail/shanpeng@taobao.com/supershafeng@gmail.com
* @QQ:770104121
* @my word:Here,believe what browsers display,and believe yourself
*/
////////////////////// Javascript’s code below ///////////////////////
/*url:Image url
* callback:加载完成之后的回调函数
* parent:将要将图片附加到哪个DOM容器里
* message:自定义的加载提示信息
*/
var LoadImage = function(url, callback, parent, message){
parent = parent || document.body.appendChild(document.createElement("div"));
message = message || "Loading…";
var image = new Image();
image.src = url;
parent.innerHTML = message;
//为支持image onload的浏览器添加onload事件
image.onload = function(){
parent.innerHTML = "";
parent.appendChild(image);
callback(image);
}
//稳步退化,为IE6、IE7使用另外一种加载提示方式
/*@cc_on
@if (@_jscript_version <= 5.7){
setTimeout(function(){
//检测image的width和height时候已经可取。
if (image.width !== 0 && image.height !== 0) {
parent.innerHTML = "";
parent.appendChild(image);
callback(image);
} else {
setTimeout(arguments.callee, 0);
}
}, 5);
}
@end
@*/
}
//Usage:
onload=function(){
LoadImage("test.jpg",function(img){},container,"Loading…");
}
[/javascript]
《点击查看示例页面》