特點:
1.圖片預(yù)載入,載入后再顯示。意圖一次呈現(xiàn),不會讓一塊一塊下載破壞你的頁面,絕佳的用戶體驗,顛覆傳統(tǒng)的瀏覽器呈現(xiàn)圖片的處理方式(需要后續(xù)函數(shù)支持)。 2.不會因載入圖片造成腳本暫停假死,完全另一線程進行。不影響主程序流程。 3.提供及時的反饋,包括兩方面的內(nèi)容:1.正在載入什么圖片 2.當前的百分數(shù)進度。大大提高留住用戶眼球的概率,不會讓用戶因為苦等而離開。 4.容錯支持,即使某個圖片沒有成功下載,也可以設(shè)置超時時間以便處理下一個圖片。 5.多變的參數(shù)類型,盡最大可能方便使用。
// 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; }
}
出處:藍色理想
責任編輯:moby
上一頁 下一頁 ImageLoader 1.1 Release [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|