IE图片预加载 – 筚路蓝缕

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;IE图片预加载类&lt;/title&gt;
&lt;script language="javascript"&gt;
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 &lt; me.Num) DownImg();
				else if (me.CallBack) me.CallBack(a);
			}
		}
		i.src = a[me.Idx];
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;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;"&gt;
	图片加载中…
&lt;/div&gt;
&lt;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);"&gt;
&lt;/div&gt;
&lt;div id="box"&gt;
&lt;/div&gt;
&lt;script language="javascript"&gt;
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 &lt; arr.length; i++)
	{
		str += '&lt;img src="+arr[i]+" /&gt;&lt;br/&gt;';
	}
	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');&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>IE图片预加载类</title>

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>

</div>

</div>

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

发表回复 取消回复

相关文章

发表回复取消回复