图片预载入第1/3页
图片预载入第1/3页
发布时间:2016-12-30 来源:查字典编辑
摘要:特点:1.图片预载入,载入后再显示。意图一次呈现,不会让一块一块下载破坏你的页面,绝佳的用户体验,颠覆传统的浏览器呈现图片的处理方式(需要后...

特点:

1.图片预载入,载入后再显示。意图一次呈现,不会让一块一块下载破坏你的页面,绝佳的用户体验,颠覆传统的浏览器呈现图片的处理方式(需要后续函数支持)。

2.不会因载入图片造成脚本暂停假死,完全另一线程进行。不影响主程序流程。

3.提供及时的反馈,包括两方面的内容:1.正在载入什么图片2.当前的百分数进度。大大提高留住用户眼球的概率,不会让用户因为苦等而离开。

4.容错支持,即使某个图片没有成功下载,也可以设置超时时间以便处理下一个图片。

5.多变的参数类型,尽最大可能方便使用。

复制代码 代码如下:

//savethisas"image_loader.js"

//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//

/*

ImageLoader,Version1.1,JavaScript

(c)2006ChristianAn<anchangsi@gmail.com>

Withcopyrightnotmodified,youcanusethisprogramfreely.

*/

//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//

functionImageLoader(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;

}elseif(typeof(Options.display)=="string"){

this.disDiv=document.getElementById(Options.display);

}elseif(typeof(Options.display)=="object"){

this.disDiv=Options.display;

}else{

this.disDiv=null;

}

if(typeof(Options.process)=="undefined"){

this.procDiv=null;

}elseif(typeof(Options.process)=="string"){

this.procDiv=document.getElementById(Options.process);

}elseif(typeof(Options.process)=="object"){

this.procDiv=Options.process;

}else{

this.procDiv=null;

}

if(typeof(document.imageArray)=="undefined")document.imageArray=newArray();

this.Load=function(){

varargs=this.Load.arguments;

if(args.length!=0){

this._ImageLoadStack=newArray();

for(i=0;i<args.length;i++){

if(args[i].indexOf("#")!=0){

this._ImageLoadStack.push(args[i]);

}

}

}elseif(this._ImageLoadStack==null){

this._runFinal();

}

this.numTotal=this._ImageLoadStack.length;

this._LoadAImage();

}

this._LoadAImage=function(){

if(this._ImageLoadStack.length!=0){

varsURL=this._ImageLoadStack.shift();

if(this.disDiv!=null)this.disDiv.innerHTML=sURL;

_currrentLoading=sURL;

varj=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++;

varpercentage=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();

}elseif(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;

}

}

当前1/3页123下一页阅读全文

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类