Jquery promise实现一张一张加载图片

网络编程 2024/11/13 佚名

3 2 1

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="/UploadFiles/2021-04-02/jquery-1.11.3.min.js">

jquery_promise实现,jquery_promise用法