又一个小巧的图片预加载类
程序员文章站
2023-11-17 18:27:28
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
<!--
var ie=navigator.appname=="microsoft internet explorer";
var opera=navigator.appname.tolowercase()=="opera";
var ff=!ie && !opera;
function loadimage(arrsrc,callback)
{
this.length=arrsrc.length;
this.loadedlen=0; //已经被加载的图片个数
var self=this;
if(self.length<1)
{
callback(arrsrc);
return;
}
//经测试,opera与别的浏览器加载方式不同,所以特别独立开来...
if(opera)
{
for(var i=0;i<self.length;i++)
{
var tmpimg=new image();
tmpimg.src=arrsrc[i];
tmpimg.onload=function()
{
self.loadedlen++;
if(self.loadedlen==self.length && callback) callback(arrsrc);
}
}
return;
}
this.load=function()
{
self.loadedlen++;
document.getelementbyid("counter").innerhtml=self.loadedlen;
if(self.loadedlen<self.length) self.downimg();
else if(callback) callback(arrsrc);
}
this.downimg=function()
{
var tmpimg=new image();
tmpimg.src=arrsrc[self.loadedlen];
if(ie)
{
if(tmpimg.readystate=="complete") self.load();
else tmpimg.onreadystatechange=function()
{
if(this.readystate=="complete") self.load();
}
}
else tmpimg.onload=self.load;
}
this.downimg();
}
//-->
</script>
</head>
<body>
<div id="counter"></div>
<script language="javascript">
<!--
var arr=['http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg','http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg','http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'];
var t=new loadimage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerhtml+=str;
});
//-->
</script>
</body>
</html>
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
<!--
var ie=navigator.appname=="microsoft internet explorer";
var opera=navigator.appname.tolowercase()=="opera";
var ff=!ie && !opera;
function loadimage(arrsrc,callback)
{
this.length=arrsrc.length;
this.loadedlen=0; //已经被加载的图片个数
var self=this;
if(self.length<1)
{
callback(arrsrc);
return;
}
//经测试,opera与别的浏览器加载方式不同,所以特别独立开来...
if(opera)
{
for(var i=0;i<self.length;i++)
{
var tmpimg=new image();
tmpimg.src=arrsrc[i];
tmpimg.onload=function()
{
self.loadedlen++;
if(self.loadedlen==self.length && callback) callback(arrsrc);
}
}
return;
}
this.load=function()
{
self.loadedlen++;
document.getelementbyid("counter").innerhtml=self.loadedlen;
if(self.loadedlen<self.length) self.downimg();
else if(callback) callback(arrsrc);
}
this.downimg=function()
{
var tmpimg=new image();
tmpimg.src=arrsrc[self.loadedlen];
if(ie)
{
if(tmpimg.readystate=="complete") self.load();
else tmpimg.onreadystatechange=function()
{
if(this.readystate=="complete") self.load();
}
}
else tmpimg.onload=self.load;
}
this.downimg();
}
//-->
</script>
</head>
<body>
<div id="counter"></div>
<script language="javascript">
<!--
var arr=['http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg','http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg','http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'];
var t=new loadimage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerhtml+=str;
});
//-->
</script>
</body>
</html>
下一篇： 一个不错的渐显菜单