在javascript設計模式實踐之代理模式--圖片預加載中用代理模式實現了圖片預加載功能。javascript
如今就更進一步,完成一個可以一張一張的連續圖片加載的功能。html
功能:java
1.一張一張加載圖片。jquery
2.加載錯誤,超時後顯示加載失敗圖片。設計模式
對於功能的要求,確定會存在對加載狀態事件的處理以及完成時回調函數的處理,這樣不只會形成代碼上的混亂,甚至破壞各類原則,就再也不用普通的方法去寫了。針對這種狀態通知的特色,比較合適採用promise架構進行處理,promise本質上就是訂閱發佈設計模式的一種,當前這個功能就用jquery自帶的promise進行開發。數組
1.完成一個加載圖片的代理建立函數,能夠生成一個帶有加載超時、失敗、成功、取消監控能力的代理。promise
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方法響應完成事件。架構
加載成功時的完成事件。app
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>