复制代码 代码如下:<!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>
推荐阅读
用javascript实现自定义标签
//by zdzhuo <html> <head> <script type="text/javascript"> var d = document; var mk = new Array( '<red>','<span style="color:red;">', '</red>','</span>', '<big>','<span style="font-size:22pt;">', '<>>>详细阅读
本文标题：又一个小巧的图片预加载类
地址：http://www.17bianji.com/kaifa2/JS/30487.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示