快捷導(dǎo)航

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

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

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

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

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

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

功能：

1.一張一張加載圖片。

2.加載錯(cuò)誤，超時(shí)后顯示加載失敗圖片。

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

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

 function createLoadImgProxy(){
  var imgCache = new Image();
  var dfd = $.Deferred();
  var timeoutTimer;
  //開(kāi)始加載超時(shí)監(jiān)控，超時(shí)后進(jìn)行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //結(jié)束加載超時(shí)監(jiān)控
  function endTimeoutWatcher(){
   if(!timeoutTimer){
   return;
   }
   clearTimeout(timeoutTimer);
  }
  //加載完成事件處理，加載完成后進(jìn)行resolve操作
  imgCache.onload = function(){
   dfd.resolve(this.src);
  };
  //加載終止事件處理，終止后進(jìn)行reject操作
  imgCache.onabort = function(){
   dfd.reject("aborted");
  };
  //加載異常事件處理，異常后進(jìn)行reject操作
  imgCache.onerror = function(){
   dfd.reject("error");
  };
  return function(eleImg, src){
   dfd.always(function(){
   //加載完成或加載失敗都要終止加載超時(shí)監(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;
   //開(kāi)始進(jìn)行超時(shí)加載監(jiān)控
   beginTimeoutWatcher();
   return dfd.promise();
  };
  }

其中，通過(guò)以下的方式創(chuàng)建了一個(gè)Deferred對(duì)象

復(fù)制代碼代碼如下:

var dfd = $.Deferred();

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

加載成功時(shí)的完成事件。

復(fù)制代碼代碼如下:

   imgCache.onload = function(){

                    dfd.resolve(this.src);

                };

以及加載完成時(shí)的響應(yīng)處理，就是把圖片設(shè)到元素上，下面的代碼是上面鏈?zhǔn)綄?xiě)法的拆解。

復(fù)制代碼代碼如下:

   dfd.done(function(src){

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

                        loadImg(eleImg, src);

                    });

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

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

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

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

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

在代理函數(shù)的最后，返回deferred的promise對(duì)象，用于給調(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)建一個(gè)加載代理函數(shù)
   var loadImgProxy = createLoadImgProxy();
   //在當(dāng)前圖片加載或失敗后，遞歸調(diào)用，加載下一張
   loadImgProxy(eleImg, s).always(loadOneByOne);
  })();
  }

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

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

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

復(fù)制代碼代碼如下:

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

至此完成。

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

完整代碼：

<!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標(biāo)簽
  //這里用自執(zhí)行函數(shù)加一個(gè)閉包，是為了可以創(chuàng)建多個(gè)id不同的img標(biāo)簽。
  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;
  //開(kāi)始加載超時(shí)監(jiān)控，超時(shí)后進(jìn)行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //結(jié)束加載超時(shí)監(jiān)控
  function endTimeoutWatcher(){
   if(!timeoutTimer){
   return;
   }
   clearTimeout(timeoutTimer);
  }
  //加載完成事件處理，加載完成后進(jìn)行resolve操作
  imgCache.onload = function(){
   dfd.resolve(this.src);
  };
  //加載終止事件處理，終止后進(jìn)行reject操作
  imgCache.onabort = function(){
   dfd.reject("aborted");
  };
  //加載異常事件處理，異常后進(jìn)行reject操作
  imgCache.onerror = function(){
   dfd.reject("error");
  };
  return function(eleImg, src){
   dfd.always(function(){
//   alert('always end');
   //加載完成或加載失敗都要終止加載超時(shí)監(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;
   //開(kāi)始進(jìn)行超時(shí)加載監(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)建一個(gè)加載代理函數(shù)
   var loadImgProxy = createLoadImgProxy();
   //在當(dāng)前圖片加載或失敗后，遞歸調(diào)用，加載下一張
   loadImgProxy(eleImg, s).always(loadOneByOne);
  })();
  }
 </script>
 </body>
</html>

您可能感興趣的文章: