特点： 1.图片预载入，载入后再显示。意图一次呈现，不会让一块一块下载破坏你的页面，绝佳的用户体验，颠覆传统的浏览器呈现图片的处理方式（需要后续函数支持）。 2.不会因载入图片造成脚本暂停假死，完全另一线程进行。不影响主程序流程。 3.提供及时的反馈，包括两方面的内容：1.正在载入什么图片 2.当前的百分数进度。大大提高留住用户眼球的概率，不会让用户因为苦等而离开。 4.容错支持，即使某个图片没有成功下载，也可以设置超时时间以便处理下一个图片。 5.多变的参数类型，尽最大可能方便使用。复制代码 代码如下:// save this as "image_loader.js" //-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-// /* ImageLoader, Version 1.1, JavaScript (c) 2006 Christian An <anchangsi@gmail.com> With copyright not modified, you can use this program freely. */ //-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-// function ImageLoader(className,Options){ this._ImageLoadStack = null; this._currrentLoading = ""; this._FinalRun = false; this.numLoaded = 0; this.ClassName = className; if(typeof(Options)=="undefined") Options = {}; if(isNaN(Options.Timeout) || Options.Timeout < 0 || Options.Timeout >100000){ this.EnableTimeout = false; }else { this.EnableTimeout = true; this.Timeout = Options.Timeout; } if(typeof(Options.func)=="undefined"){ this.AfterFunction = null; }else{ this.AfterFunction = Options.func; } if(typeof(Options.display)=="undefined"){ this.disDiv = null; }else if(typeof(Options.display)=="string"){ this.disDiv = document.getElementById(Options.display); }else if(typeof(Options.display)=="object"){ this.disDiv = Options.display; }else{ this.disDiv = null; } if(typeof(Options.process)=="undefined"){ this.procDiv = null; }else if(typeof(Options.process)=="string"){ this.procDiv = document.getElementById(Options.process); }else if(typeof(Options.process)=="object"){ this.procDiv = Options.process; }else{ this.procDiv = null; } if(typeof(document.imageArray)=="undefined") document.imageArray = new Array(); this.Load = function(){ var args = this.Load.arguments; if(args.length!=0){ this._ImageLoadStack = new Array(); for(i=0; i<args.length; i++){ if(args[i].indexOf("#")!=0){ this._ImageLoadStack.push(args[i]); } } }else if(this._ImageLoadStack == null){ this._runFinal(); } this.numTotal = this._ImageLoadStack.length; this._LoadAImage(); } this._LoadAImage = function(){ if(this._ImageLoadStack.length!=0){ var sURL = this._ImageLoadStack.shift(); if(this.disDiv!=null) this.disDiv.innerHTML = sURL; _currrentLoading = sURL; var j = document.imageArray.length; document.imageArray[j] = document.createElement("IMG"); document.imageArray[j].Owner = this; document.imageArray[j].onload = function(){ this.Owner._LoadAImage(); this.onload = null; } document.imageArray[j].onerror = function(){ this.Owner._LoadAImage(); this.onload = null; } if(this.EnableTimeout){ window.setTimeout("if(_currrentLoading==""+sURL+""){"+this.ClassName+"._LoadAImage()}",this.Timeout); } document.imageArray[j++].src = sURL; if(this.procDiv!=null){ this.numLoaded++; var percentage = Math.floor(this.numLoaded * 100 / this.numTotal); this.procDiv.innerHTML = percentage; } }else{ this._runFinal(); } } this._runFinal = function(){ if(this._FinalRun == false){ this._FinalRun = true; if(typeof(this.AfterFunction)=="function"){ this.AfterFunction(); }else if(typeof(this.AfterFunction)=="string"){ if (window.execScript){ window.execScript(this.AfterFunction); }else{ window.eval(this.AfterFunction); } } } } this.setLoadImages = function(imageArray){ if(typeof(imageArray)!="object") return; this._ImageLoadStack = imageArray; } }

　　推荐阅读

　　Firefox 无法获取cssRules 的解决办法

Firefox实在太BT了, 总给我们加一些无聊的安全权限设置. 这几天在做Qzone的FF兼容发现. 设置了domain 后, FF下无法获取 styleSheets 的 cssRules 了. 虽然无法获取 cssRules ,但是我惊讶地发现,居然可以对 styleSh>>>详细阅读

本文标题：图片预载入第1/3页

地址：http://www.17bianji.com/kaifa2/JS/31474.html

 1/2    1