作家
登录

又一个小巧的图片预加载类

作者: 来源:www.28hudong.com 2013-03-30 03:29:35 阅读 我要评论

复制代码 代码如下:<!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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)