圖片預載入第1/3頁
2024-09-06 12:44:48
供稿:網友
特點:
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;