Jquery promise實作一張一張載入圖片

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>

登入後複製

Jquery promise實作一張一張載入圖片_jquery