快捷導航

Jquery promise實現(xiàn)一張一張加載圖片

更新時間：2015年11月13日 08:59:18 投稿：mrr

通過jquery promise實現(xiàn)一張一張的連續(xù)圖片的加載功能，當圖片加載錯誤，超時后會顯示加載圖片加載失敗。對jquery promise實現(xiàn)加載圖片的相關(guān)資料感興趣的朋友參考下

Promise是CommonJS的規(guī)范之一，擁有resolve、reject、done、fail、then等方法，能夠幫助我們控制代碼的流程，避免函數(shù)的多層嵌套。如今異步在web開發(fā)中越來越重要，對于開發(fā)人員來說，這種非線性執(zhí)行的編程會讓開發(fā)者覺得難以掌控，而Promise可以讓我們更好地掌控代碼的執(zhí)行流程,jQuery等流行的js庫都已經(jīng)實現(xiàn)了這個對象，年底即將發(fā)布的ES6也將原生實現(xiàn)Promise。

在javascript設(shè)計模式實踐之代理模式--圖片預(yù)加載中用代理模式實現(xiàn)了圖片預(yù)加載功能。

現(xiàn)在就更進一步，完成一個能夠一張一張的連續(xù)圖片加載的功能。

功能：

1.一張一張加載圖片。

2.加載錯誤，超時后顯示加載失敗圖片。

對于功能的要求，肯定會存在對加載狀態(tài)事件的處理以及完成時回調(diào)函數(shù)的處理，這樣不僅會造成代碼上的混亂，甚至破壞各種原則，就不再用普通的方法去寫了。針對這種狀態(tài)通知的特點，比較合適采用promise架構(gòu)進行處理，promise本質(zhì)上就是訂閱發(fā)布設(shè)計模式的一種，當前這個功能就用jquery自帶的promise進行開發(fā)。

1.完成一個加載圖片的代理創(chuàng)建函數(shù)，可以生成一個帶有加載超時、失敗、成功、取消監(jiān)控能力的代理。

 function createLoadImgProxy(){
  var imgCache = new Image();
  var dfd = $.Deferred();
  var timeoutTimer;
  //開始加載超時監(jiān)控，超時后進行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //結(jié)束加載超時監(jiān)控
  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(){
   //加載完成或加載失敗都要終止加載超時監(jiān)控
   endTimeoutWatcher();
   }).done(function(src){
   //加載完成后，往圖片元素上設(shè)置圖片
   loadImg(eleImg, src);
   }).fail(function(msg){
   //加載失敗后，往圖片元素上設(shè)置失敗圖片
   loadImg(eleImg, 'loadFailed.jpg');
   });
   loadImg(eleImg, 'loading.gif');
   imgCache.src = src;
   //開始進行超時加載監(jiān)控
   beginTimeoutWatcher();
   return dfd.promise();
  };
  }

其中，通過以下的方式創(chuàng)建了一個Deferred對象

復制代碼代碼如下:

var dfd = $.Deferred();

Deferred對象通過resolve方法觸發(fā)完成事件，使用done方法響應(yīng)完成事件。

加載成功時的完成事件。

復制代碼代碼如下:

   imgCache.onload = function(){

                    dfd.resolve(this.src);

                };

以及加載完成時的響應(yīng)處理，就是把圖片設(shè)到元素上，下面的代碼是上面鏈式寫法的拆解。

復制代碼代碼如下:

   dfd.done(function(src){

                        //加載完成后，往圖片元素上設(shè)置圖片

                        loadImg(eleImg, src);

                    });

Defferred對象通過reject方法觸發(fā)拒絕事件，使用fail方法響應(yīng)拒絕事件，表示加載失敗。

在加載超時，終止，異常時的拒絕事件。

 //開始加載超時監(jiān)控，超時后進行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //加載終止事件處理，終止后進行reject操作
  imgCache.onabort = function(){
   dfd.reject("aborted");
  };
  //加載異常事件處理，異常后進行reject操作
  imgCache.onerror = function(){
   dfd.reject("error");
  };

以及加載失敗時的響應(yīng)處理，設(shè)置失敗圖片。

 dfd.fail(function(msg){
   //加載失敗后，往圖片元素上設(shè)置失敗圖片
   loadImg(eleImg, 'loadFailed.jpg');
   });

在代理函數(shù)的最后，返回deferred的promise對象，用于給調(diào)用的地方監(jiān)控加載的完成和失敗態(tài)，以便于下一張圖片的加載。

return dfd.promise();

2.一張一張的連續(xù)加載

//一張一張的連續(xù)加載圖片
  //參數(shù)：
  // srcs: 圖片路徑數(shù)組
  function doLoadImgs(srcs){
  var index = 0;
  (function loadOneByOne(){
   //退出條件
   if(!(s = srcs[index++])) {
   return;
   }
   var eleImg = createImgElement();
   document.getElementById('imgContainer').appendChild(eleImg);
   //創(chuàng)建一個加載代理函數(shù)
   var loadImgProxy = createLoadImgProxy();
   //在當前圖片加載或失敗后，遞歸調(diào)用，加載下一張
   loadImgProxy(eleImg, s).always(loadOneByOne);
  })();
  }

做一個loadOneByOne的加載遞歸函數(shù)。

內(nèi)部先創(chuàng)建一個加載代理，在代理加載完圖片，不管是成功還是失敗后，遞歸調(diào)用loadOneByOne函數(shù)加載下一張圖片。

關(guān)鍵就在于代理函數(shù)返回的promise對象，使用.always方法可在加載完成后（成功或失?。┻M行l(wèi)oadOneByOne遞歸調(diào)用加載下一張。

復制代碼代碼如下:

loadImgProxy(eleImg, s).always(loadOneByOne);

至此完成。

采用了promise模式后，callback函數(shù)不見了，維護狀態(tài)的函數(shù)和內(nèi)部變量也不見了，代碼更清晰簡單，使得代理函數(shù)和本地函數(shù)之間的一致性得到保護。

完整代碼：

<!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);
  });
  });
  //創(chuàng)建img標簽
  //這里用自執(zhí)行函數(shù)加一個閉包，是為了可以創(chuàng)建多個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;
  //開始加載超時監(jiān)控，超時后進行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //結(jié)束加載超時監(jiān)控
  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');
   //加載完成或加載失敗都要終止加載超時監(jiān)控
   endTimeoutWatcher();
   }).done(function(src){
//   alert('done end');
   //加載完成后，往圖片元素上設(shè)置圖片
   loadImg(eleImg, src);
   }).fail(function(msg){
//   alert('fail end:' + msg);
   //加載失敗后，往圖片元素上設(shè)置失敗圖片
   loadImg(eleImg, 'loadFailed.jpg');
   });
   loadImg(eleImg, 'loading.gif');
   imgCache.src = src;
   //開始進行超時加載監(jiān)控
   beginTimeoutWatcher();
   return dfd.promise();
  };
  }
  //一張一張的連續(xù)加載圖片
  //參數(shù)：
  // srcs: 圖片路徑數(shù)組
  function doLoadImgs(srcs){
  var index = 0;
  (function loadOneByOne(){
   //退出條件
   if(!(s = srcs[index++])) {
   return;
   }
   var eleImg = createImgElement();
   document.getElementById('imgContainer').appendChild(eleImg);
   //創(chuàng)建一個加載代理函數(shù)
   var loadImgProxy = createLoadImgProxy();
   //在當前圖片加載或失敗后，遞歸調(diào)用，加載下一張
   loadImgProxy(eleImg, s).always(loadOneByOne);
  })();
  }
 </script>
 </body>
</html>

您可能感興趣的文章: