亚洲午夜一区,亚洲国产欧美精品,99国产精品久久久

導航首頁 ? 技術教程 ? Jquery promise實現一張一張加載圖片

全站頭部文字我要出現在這里

Jquery promise實現一張一張加載圖片 675 2024-03-21

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="http://www.gimoo.net/t/1904/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>

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類