asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
By dknt From bbs.blueidea.com

特点:
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;
    }

}

[Document]

使用

var loader = new ImageLoader(ClassName,Options);

的形式创建该对象。

其中:

loader : 为 JavaScript 变量名;

ClassName : String 型: 为 loader 在 JavaScript 中的表达。 如果是在任何函数之外创建该对象,请直接赋以该变量的字符串形式,如对应loader 为"loader" ; 如果是某个函数体内,仍然赋以该变量的字符串形式,但是创建的变量名请使用 window.loader 的形式。

Options   : Object 型,下列属性是支持的:
                Timeout : Integer,可选。取值为1-100000,单位毫秒。非正整数表示不采用。此为一个图片的最大载入时间,如果提供这个参数,则某个图片不能正常下载时,可以跳过继续下载另一个图片。否则将一直等到该图片下载完成为止。
                func      : Function / String,必须。当所有图片载入之后调用的函数,通常是一个显示这些图片功能的函数。如果不提供这个函数,则整个机制将变得毫无作用。 Function型的参数会直接调用,String型的参数会当作JavaScript 语句来运行。
                display   :String / Object,可选。此为显示当前载入图片的DOM对象,该对象应该支持innerHTML属性。 当提供此参数为String 时,会被当作DOM对象的 id 来处理,若 Object 型,则直接当作一个DOM对象。提供其他类型没有效果。
                process  :String / Object,可选。此为以百分数显示当前载入进度的DOM对象,该对象应该支持innerHTML属性。 当提供此参数为String 时,会被当作DOM对象的 id 来处理,若 Object 型,则直接当作一个DOM对象。提供其他类型没有效果。
见下列示范:

//在所有函数之外时
//function final(){...};
function $(par){
    return document.getElementById(par)
}

var MyLoader = new ImageLoader("MyLoader ",{Timeout:1000,func: final,display:"display",process:$("process")});


//在某个函数体内时
function somefunc(){
   //...
   window.MyLoader = new ImageLoader("MyLoader ",{Timeout:1000,func: "alert('fine')",display:"display",process:$("process")});
  //...
}

=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*=*-*

方法定义:
Load(paralist)  :载入一系列图片。完毕后自动调用 func属性的内容。 paralist,可以是一些字符串的集合(但不要提供一个数组),各项由 , 隔开。这些字符串应该是图片的url。也可以不提供任何参数。Load方法将载入预先设定好的系列图片。如果没有预先设定过,则直接调用 func 属性的内容。若func没有提供,则没有任何效果。

//sample:
MyLoader.Load("http://bbs.blueidea.com/images/blue/logo.gif",
            "http://gg.blueidea.com/2006/chinaok/208x32.gif",
            "http://gg.blueidea.com/2006/now/208x32.gif",
            "http://gg.blueidea.com/2006/gongyi/banner.jpg",
            "http://gg.blueidea.com/2006/flash8/pepsi.gif",
            "http://www.google.com/intl/zh-CN_ALL/images/logo.gif");

//or if pic series is provided.

MyLoader.Load();

setLoadImages(ArrayImages): 设定要载入的图片系列。ArrayImages 应以数组的形式提供,数组的每一个元素都应当是一个图片的URL。不接受其他类型的参数。此方法调用后并不开始载入图片。

//sample:
MyLoader.setLoadImages(["http://bbs.blueidea.com/images/blue/logo.gif",
            "http://gg.blueidea.com/2006/chinaok/208x32.gif",
            "http://gg.blueidea.com/2006/now/208x32.gif",
            "http://gg.blueidea.com/2006/gongyi/banner.jpg",
            "http://gg.blueidea.com/2006/flash8/pepsi.gif",
            "http://www.google.com/intl/zh-CN_ALL/images/logo.gif"])
[测试用例]
  1 <body>
  2 <script >
  3 //-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//
  4 /*
  5   ImageLoader, Version 1.0, JavaScript 
  6   (c) 2006 Christian An <anchangsi@gmail.com>
  7 
  8   With copyright not modified, you can use this program freely. 
  9 */
 10 //-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//
 11 
 12 
 13 
 14 function ImageLoader(className,Options){
 15     this._ImageLoadStack = null;
 16     this._currrentLoading = "";
 17     this._FinalRun = false;
 18     this.numLoaded = 0;
 19     this.ClassName = className;
 20     
 21     if(typeof(Options)=="undefined") Options = {};
 22     
 23     if(isNaN(Options.Timeout) || Options.Timeout < 0 ||  Options.Timeout >100000){
 24         this.EnableTimeout = false;
 25     }else {
 26         this.EnableTimeout = true;
 27         this.Timeout = Options.Timeout;
 28     }
 29     
 30     if(typeof(Options.func)=="undefined"){
 31         this.AfterFunction = null;
 32     }else{
 33         this.AfterFunction = Options.func;
 34     }
 35     
 36     if(typeof(Options.display)=="undefined"){
 37         this.disDiv = null;
 38     }else if(typeof(Options.display)=="string"){
 39         this.disDiv = document.getElementById(Options.display);
 40     }else if(typeof(Options.display)=="object"){
 41         this.disDiv = Options.display;
 42     }else{
 43         this.disDiv = null;
 44     }
 45 
 46     if(typeof(Options.process)=="undefined"){
 47         this.procDiv = null;
 48     }else if(typeof(Options.process)=="string"){
 49         this.procDiv = document.getElementById(Options.process);
 50     }else if(typeof(Options.process)=="object"){
 51         this.procDiv = Options.process;
 52     }else{
 53         this.procDiv = null;
 54     }
 55 
 56     
 57     if(typeof(document.imageArray)=="undefined") document.imageArray = new Array();
 58     
 59     this.Load = function(){
 60         var args = this.Load.arguments;
 61         if(args.length!=0){
 62             this._ImageLoadStack = new Array();
 63             for(i=0; i<args.length; i++){
 64                 if(args[i].indexOf("#")!=0){
 65                     this._ImageLoadStack.push(args[i]);
 66                 }
 67             }
 68 
 69         }else if(this._ImageLoadStack == null){
 70             this._runFinal();
 71         }
 72         this.numTotal = this._ImageLoadStack.length;
 73         this._LoadAImage();
 74     }
 75     
 76     this._LoadAImage = function(){
 77         if(this._ImageLoadStack.length!=0){
 78             var sURL = this._ImageLoadStack.shift();
 79             if(this.disDiv!=nullthis.disDiv.innerHTML = sURL;
 80             _currrentLoading = sURL;
 81         
 82             
 83             var j = document.imageArray.length;
 84             document.imageArray[j] = document.createElement("IMG");
 85             document.imageArray[j].Owner = this;
 86             
 87             document.imageArray[j].onload = function(){
 88                 this.Owner._LoadAImage();
 89                 this.onload = null;
 90             }
 91             document.imageArray[j].onerror = function(){
 92                 this.Owner._LoadAImage();
 93                 this.onload = null;
 94             }
 95             
 96             if(this.EnableTimeout){
 97                 window.setTimeout("if(_currrentLoading==\""+sURL+"\"){"+this.ClassName+"._LoadAImage()}",this.Timeout);
 98             }
 99     
100             document.imageArray[j++].src = sURL;
101                 if(this.procDiv!=null){
102                 this.numLoaded++;
103                 var percentage = Math.floor(this.numLoaded * 100 / this.numTotal);
104                 this.procDiv.innerHTML = percentage;
105             }
106 
107         }else{
108             this._runFinal();
109         }
110 
111     }
112     this._runFinal = function(){
113             if(this._FinalRun == false){
114                 this._FinalRun = true;
115                 
116                 if(typeof(this.AfterFunction)=="function"){
117                     this.AfterFunction();
118                 }else if(typeof(this.AfterFunction)=="string"){
119                     if (window.execScript){
120                         window.execScript(this.AfterFunction);
121                     }else{
122                         window.eval(this.AfterFunction); 
123                     }
124                 }
125             }
126     }
127     this.setLoadImages = function(imageArray){
128         if(typeof(imageArray)!="object"return;
129         this._ImageLoadStack = imageArray;
130     }
131 
132 }</script>
133 <div id="display"></div>
134 <div id="process"></div>
135 <div id="result"></div>
136 </body>
137 
138 <script>
139 function final(){
140     $("result").innerHTML="OK";
141 };
142 
143 function $(par){
144     return document.getElementById(par)
145 }
146 
147  var loader = new ImageLoader("loader",{Timeout:-1,func: final,display:"display",process:$("process")});
148  
149  
150  loader.Load("http://bbs.blueidea.com/images/blue/logo.gif",
151              "http://gg.blueidea.com/2006/chinaok/208x32.gif",
152             "http://gg.blueidea.com/2006/now/208x32.gif",
153             "http://gg.blueidea.com/2006/gongyi/banner.jpg",
154             "http://gg.blueidea.com/2006/flash8/pepsi.gif",
155             "http://www.google.com/intl/zh-CN_ALL/images/logo.gif");
156 </script>
posted on 2006-10-14 16:16 汪杰 阅读(301) 评论(0)  编辑 收藏 引用 所属分类: ajax
只有注册用户登录后才能发表评论。

<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 466814
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜