图片预加载(针对后台)
<html><head>
<title>IE图片预加载类 </title>
<script language="javascript">
function LoadImageClass()
{
var me = this;
var a = []; //图片数组
this.Idx = 0; //已经被加载的图片个数
this.Num = 0; //图片总数
//下载图片
this.LoadImages = function(s)
{
a = s.split(",");
this.Num = a.length;
DownImg();
}
function DownImg()
{
var i=new Image();
var f = true;
i.onload= function()
{
if (f)
{
f = false
me.Idx++;
if (me.LoadIng) me.LoadIng();
if (me.Idx <me.Num) DownImg();
else if(me.CallBack) me.CallBack(a);
}
}
i.src = a[me.Idx];
}
}
</script>
</head>
<body>
<div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientWidth/2-60); top:expression(document.body.clientHeight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;">图片加载中... </div>
<div id="divPageMask" style="position:absolute; z-index:99; left:0px; top:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight); background:black; filter:alpha(opacity=50);"> </div>
<div id="box"> </div>
<script language="javascript">
var o = document.getElementById("counter");
var t=new LoadImageClass();
t.LoadIng = function() { o.innerHTML="加载进度:"+Math.floor(t.Idx/t.Num*100)+"%" };
t.CallBack = function(arr)
{
window.setTimeout(function(){o.style.display='none';alert('图片加载完毕!')},1000);
document.getElementById('divPageMask').style.display='none';
var str="";
for(var i=0;i <arr.length;i++)
{
str+=' <img src="'+arr[i]+'" />';
}
document.getElementById("box").innerHTML=str;
}
t.LoadImages('http://www.baidu.com/img/logo-yy.gif,[img]http://bbs.51js.com/images/default/logo.gif[/img],[img]http://www.programbbs.com/bbs/uploadFace/46_2006910934216927.gif[/img],[img]http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg[/img],[url]http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg[/url],[img]http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg[/img]');
</script>
</body>
</html>
页:
[1]