Janji Jquery melaksanakan memuatkan imej satu demi satu_jquery

Promise ialah salah satu spesifikasi CommonJS Ia mempunyai penyelesaian, tolak, selesai, gagal, kemudian dan kaedah lain, yang boleh membantu kami mengawal aliran kod dan mengelakkan sarang berbilang lapisan fungsi. Pada masa kini, asynchrony menjadi semakin penting dalam pembangunan web Bagi pembangun, pengaturcaraan pelaksanaan bukan linear ini akan menyukarkan pembangun untuk mengawalnya dengan lebih baik proses pelaksanaan kod tersebut sebagai jQuery Semua perpustakaan telah pun melaksanakan objek ini, dan ES6, yang akan dikeluarkan pada akhir tahun, juga akan melaksanakan Promise secara asli.

Dalam mod proksi amalan corak reka bentuk JavaScript - pramuat imej, fungsi pramuat imej dilaksanakan menggunakan mod proksi.

Sekarang mari kita melangkah lebih jauh dan lengkapkan fungsi yang boleh memuatkan gambar berterusan satu demi satu.

Fungsi:

1. Muatkan gambar satu persatu.

2. Ralat memuatkan, imej kegagalan memuatkan akan dipaparkan selepas tamat masa.

Berkenaan keperluan fungsian, pasti akan ada pemprosesan peristiwa status pemuatan dan fungsi panggil balik apabila selesai Ini bukan sahaja akan menyebabkan kekeliruan dalam kod, malah memusnahkan pelbagai prinsip, jadi kami tidak lagi menggunakan kaedah biasa untuk menulisnya. . Memandangkan ciri-ciri pemberitahuan status ini, lebih sesuai untuk menggunakan seni bina janji untuk pemprosesan pada dasarnya adalah sejenis corak reka bentuk terbitan langganan Pada masa ini, fungsi ini dibangunkan menggunakan janji yang disertakan dengan jquery.

1 Lengkapkan fungsi penciptaan proksi untuk memuatkan imej, yang boleh menjana proksi dengan keupayaan pemantauan tamat masa pemuatan, kegagalan, kejayaan dan pembatalan.

 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();
  };
  }

Antaranya, objek Tertunda dicipta dengan cara berikut

Salin kod Kod adalah seperti berikut:

var dfd = $.Deferred();

Objek Tertunda mencetuskan peristiwa penyiapan melalui kaedah penyelesaian dan bertindak balas kepada peristiwa penyiapan menggunakan kaedah selesai.

Acara lengkap apabila pemuatan berjaya.

Salin kod Kod adalah seperti berikut:

imgCache.onload = function(){
                  dfd.resolve(this.src);
                };

dan pemprosesan tindak balas apabila pemuatan selesai adalah untuk menetapkan imej kepada elemen Kod berikut ialah pembongkaran kaedah penulisan rantai di atas.

Salin kod Kod adalah seperti berikut:

dfd.done(function(src){
//Selepas pemuatan selesai, tetapkan imej pada elemen imej
LoadImg(eleImg, src);
                     });

Objek Ditangguh mencetuskan peristiwa penolakan melalui kaedah penolakan dan menggunakan kaedah gagal untuk bertindak balas kepada peristiwa penolakan, menunjukkan bahawa pemuatan gagal.

Tolak acara apabila memuatkan tamat masa, penamatan, pengecualian.                                                                                                                                                                  

 //开始加载超时监控，超时后进行reject操作
  function beginTimeoutWatcher(){
   timeoutTimer = setTimeout(function(){
   dfd.reject('timeout');
   }, 10000);
  }
  //加载终止事件处理，终止后进行reject操作
  imgCache.onabort = function(){
   dfd.reject("aborted");
  };
  //加载异常事件处理，异常后进行reject操作
  imgCache.onerror = function(){
   dfd.reject("error");
  };

Dan pemprosesan tindak balas apabila memuatkan gagal, menetapkan gambar kegagalan.                                                          

 dfd.fail(function(msg){
   //加载失败后，往图片元素上设置失败图片
   loadImg(eleImg, 'loadFailed.jpg');
   });

Pada penghujung fungsi proksi, kembalikan objek janji tertunda, yang digunakan untuk memantau status penyiapan dan kegagalan pemuatan ke tempat panggilan untuk memudahkan pemuatan imej seterusnya.

kembali dfd.promise();

2. Pemuatan berterusan satu persatu

//一张一张的连续加载图片
  //参数：
  // 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);
  })();
  }

Buat fungsi pemuatan rekursif loadOneByOne.

Ejen pemuatan pertama kali dibuat secara dalaman Selepas ejen memuatkan imej, tanpa mengira kejayaan atau kegagalan, fungsi loadOneByOne dipanggil secara rekursif untuk memuatkan imej seterusnya.

Kuncinya terletak pada objek janji yang dikembalikan oleh fungsi proksi Gunakan kaedah .always untuk membuat panggilan rekursif untuk memuatkanOneByOne untuk memuatkan gambar seterusnya selepas pemuatan selesai (berjaya atau gagal).

Salin kod Kod adalah seperti berikut:

loadImgProxy(eleImg, s).selalu(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>