快捷導(dǎo)航

圖片預(yù)載入第1/3頁(yè)

更新時(shí)間：2006年10月03日 00:00:00 作者：

特點(diǎn)：
1.圖片預(yù)載入，載入后再顯示。意圖一次呈現(xiàn)，不會(huì)讓一塊一塊下載破壞你的頁(yè)面，絕佳的用戶體驗(yàn)，顛覆傳統(tǒng)的瀏覽器呈現(xiàn)圖片的處理方式（需要后續(xù)函數(shù)支持）。
2.不會(huì)因載入圖片造成腳本暫停假死，完全另一線程進(jìn)行。不影響主程序流程。
3.提供及時(shí)的反饋，包括兩方面的內(nèi)容：1.正在載入什么圖片 2.當(dāng)前的百分?jǐn)?shù)進(jìn)度。大大提高留住用戶眼球的概率，不會(huì)讓用戶因?yàn)榭嗟榷x開(kāi)。
4.容錯(cuò)支持，即使某個(gè)圖片沒(méi)有成功下載，也可以設(shè)置超時(shí)時(shí)間以便處理下一個(gè)圖片。
5.多變的參數(shù)類(lèi)型，盡最大可能方便使用。

復(fù)制代碼代碼如下:

// 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; 
    } 

} 