首頁 > 開發者 > JavaScript
Jquery promise實現一張一張載入圖片，jquerypromise
Promise是CommonJS的規範之一，擁有resolve、reject、done、fail、then等方法，能夠協助我們控制碼的流程，避免函數的多層嵌套。如今非同步在web開發中越來越重要，對於開發人員來說，這種非線性執行的編程會讓開發人員覺得難以掌控，而Promise可以讓我們更好地掌控代碼的執行流程,jQuery等流行的js庫都已經實現了這個對象，年底即將發布的ES6也將原生實現Promise。
在javascript設計模式實踐之代理模式--圖片預先載入中用代理模式實現了圖片預先載入功能。
現在就更進一步，完成一個能夠一張一張的連續圖片載入的功能。
功能：
1.一張一張載入圖片。
2.載入錯誤，逾時後顯示載入失敗圖片。
對於功能的要求，肯定會存在對載入狀態事件的處理以及完成時回呼函數的處理，這樣不僅會造成代碼上的混亂，甚至破壞各種原則，就不再用普通的方法去寫了。針對這種狀態通知的特點，比較合適採用promise架構進行處理，promise本質上就是訂閱發布設計模式的一種，當前這個功能就用jquery內建的promise進行開發。
1.完成一個載入圖片的代理建立函數，可以產生一個帶有載入逾時、失敗、成功、取消監控能力的代理。
function createLoadImgProxy(){ var imgCache = new Image(); var dfd = $.Deferred(); var timeoutTimer; //開始載入逾時監控，逾時後進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //結束載入逾時監控 function endTimeoutWatcher(){ if(!timeoutTimer){ return; } clearTimeout(timeoutTimer); } //載入完成事件處理，載入完成後進行resolve操作 imgCache.onload = function(){ dfd.resolve(this.src); }; //載入終止事件處理，終止後進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //載入例外狀況事件處理，異常後進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); }; return function(eleImg, src){ dfd.always(function(){ //載入完成或載入失敗都要終止載入逾時監控 endTimeoutWatcher(); }).done(function(src){ //載入完成後，往圖片元素上設定圖片 loadImg(eleImg, src); }).fail(function(msg){ //載入失敗後，往圖片元素上設定失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); }); loadImg(eleImg, 'loading.gif'); imgCache.src = src; //開始進行逾時載入監控 beginTimeoutWatcher(); return dfd.promise(); }; }
其中，通過以下的方式建立了一個Deferred對象
複製代碼 代碼如下:
var dfd = $.Deferred();
Deferred對象通過resolve方法觸發完成事件，使用done方法響應完成事件。
載入成功時的完成事件。
複製代碼 代碼如下:
imgCache.onload = function(){
dfd.resolve(this.src);
};
以及載入完成時的響應處理，就是把圖片設到元素上，下面的代碼是上面鏈式寫法的拆解。
複製代碼 代碼如下:
dfd.done(function(src){
//載入完成後，往圖片元素上設定圖片
loadImg(eleImg, src);
});
Defferred對象通過reject方法觸發拒絕事件，使用fail方法響應拒絕事件，表示載入失敗。
在載入逾時，終止，異常時的拒絕事件。
//開始載入逾時監控，逾時後進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //載入終止事件處理，終止後進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //載入例外狀況事件處理，異常後進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); };
以及載入失敗時的響應處理，設定失敗圖片。
dfd.fail(function(msg){ //載入失敗後，往圖片元素上設定失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); });
在代理函數的最後，返回deferred的promise對象，用於給調用的地方監控載入的完成和失敗態，以便於下一張圖片的載入。
return dfd.promise();
2.一張一張的連續載入
//一張一張的連續載入圖片 //參數： // srcs: 圖片路徑數組 function doLoadImgs(srcs){ var index = 0; (function loadOneByOne(){ //允出準則 if(!(s = srcs[index++])) { return; } var eleImg = createImgElement(); document.getElementById('imgContainer').appendChild(eleImg); //建立一個載入代理函數 var loadImgProxy = createLoadImgProxy(); //在當前圖片載入或失敗後，遞迴調用，載入下一張 loadImgProxy(eleImg, s).always(loadOneByOne); })(); }
做一個loadOneByOne的載入遞迴函式。
內部先建立一個載入代理，在代理載入完圖片，不管是成功還是失敗後，遞迴調用loadOneByOne函數載入下一張圖片。
關鍵就在於代理函數返回的promise對象，使用.always方法可在載入完成後（成功或失敗）進行loadOneByOne遞迴調用載入下一張。
複製代碼 代碼如下:
loadImgProxy(eleImg, s).always(loadOneByOne);
至此完成。
採用了promise模式後，callback函數不見了，維護狀態的函數和內部變數也不見了，代碼更清晰簡單，使得代理函數和本地函數之間的一致性得到保護。
完整代碼：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <button id='btnLoadImg'>載入圖片</button> <br> <div id='imgContainer'> </div> <br> <script type='text/javascript' src="./jquery-1.11.3.min.js"></script> <script type='text/javascript'> var imgSrcs = [ 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg', 'http://www.newbridgemotorsport.com/files/6413/9945/0406/IMG_3630.jpg', 'http://www.carsceneuk.com/wp-content/uploads/2015/03/88y9989.jpg', 'http://mfiles.sohu.com/20130223/5ff_403b2e7a_7a1f_7f24_66eb_79e3f27d58cf_1.jpg', 'http://img1.imgtn.bdimg.com/it/u=2678963350,1378052193&fm=21&gp=0.jpg' ]; $(document).ready(function(){ $('#btnLoadImg').bind('click', function(){ doLoadImgs(imgSrcs); }); }); //建立img標籤 //這裡用自執行函數加一個閉包，是為了可以建立多個id不同的img標籤。 var createImgElement = (function(){ var index = 0; return function() { var eleImg = document.createElement('img'); eleImg.setAttribute('width', '200'); eleImg.setAttribute('heght', '150'); eleImg.setAttribute('id', 'img' + index++); return eleImg; }; })(); function loadImg(img, src) { img.src = src; } function createLoadImgProxy(){ var imgCache = new Image(); var dfd = $.Deferred(); var timeoutTimer; //開始載入逾時監控，逾時後進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //結束載入逾時監控 function endTimeoutWatcher(){ if(!timeoutTimer){ return; } clearTimeout(timeoutTimer); } //載入完成事件處理，載入完成後進行resolve操作 imgCache.onload = function(){ dfd.resolve(this.src); }; //載入終止事件處理，終止後進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //載入例外狀況事件處理，異常後進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); }; return function(eleImg, src){ dfd.always(function(){// alert('always end'); //載入完成或載入失敗都要終止載入逾時監控 endTimeoutWatcher(); }).done(function(src){// alert('done end'); //載入完成後，往圖片元素上設定圖片 loadImg(eleImg, src); }).fail(function(msg){// alert('fail end:' + msg); //載入失敗後，往圖片元素上設定失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); }); loadImg(eleImg, 'loading.gif'); imgCache.src = src; //開始進行逾時載入監控 beginTimeoutWatcher(); return dfd.promise(); }; } //一張一張的連續載入圖片 //參數： // srcs: 圖片路徑數組 function doLoadImgs(srcs){ var index = 0; (function loadOneByOne(){ //允出準則 if(!(s = srcs[index++])) { return; } var eleImg = createImgElement(); document.getElementById('imgContainer').appendChild(eleImg); //建立一個載入代理函數 var loadImgProxy = createLoadImgProxy(); //在當前圖片載入或失敗後，遞迴調用，載入下一張 loadImgProxy(eleImg, s).always(loadOneByOne); })(); } </script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
