IE图片预加载 – 筚路蓝缕

<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]+" /><br/>';
	}
	document.getElementById("box").innerHTML = str;
}
t.LoadImages('http://photo1.bababian.com/upload3/20070726/90C803067E6AE5F138890F7EDBD6A5B2_240.jpg,http://photo1.bababian.com/upload3/20070726/AE9544EED47E210930511245D43E61C9_240.jpg,http://photo1.bababian.com/upload3/20070726/C0C286574F4D794190BC893B8FF9699B_240.jpg,http://photo1.bababian.com/upload3/20070726/153DCE973D5A68BCF1581C598D58FCC1_240.jpg,http://photo1.bababian.com/upload3/20070726/2882CBEC90AE58AB3AE56A157B3B9D4F_240.jpg,http://photo1.bababian.com/upload3/20070726/40C80D0BD65E5D0EA82CDE6556A53815_240.jpg,http://photo1.bababian.com/upload3/20070726/F098FDD6147BFABC4796CFC463A025A9_240.jpg');</script>
</body>
</html>
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31
发表回复 取消回复

相关文章

发表回复取消回复
