首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 13, 2015

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="./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>

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
深入理解JavaScript系列（34）：设计模式之命令模式详解
Mar 03 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
js图片上传前预览功能（兼容所有浏览器）
Aug 24 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
jquery转盘抽奖功能实现
Nov 13 #Javascript
javascript生成随机数方法汇总
Nov 12 #Javascript
js正则表达式验证邮件地址
Nov 12 #Javascript
每天一篇javascript学习小结（Boolean对象）
Nov 12 #Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 #Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 #Javascript
js图片轮播效果实现代码
Apr 18 #Javascript
iOS16(1) iOS15(1) Pyecharts(7) Athens(1) opencv(7) iOS(1) FuzzyWuzzy(1) moviepy(1) compose(3) 模糊匹配(1)
You might like
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP中的事务使用实例
2015/05/26 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
再探JavaScript作用域
2014/09/24 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
详解Python3中的 input() 函数
2020/03/18 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Maisons du Monde德国：法国家具和装饰的市场领导者
2019/07/26 全球购物
美国眼镜在线零售商：Dualens
2019/12/07 全球购物
农民工创业典型事迹
2014/01/25 职场文书
安全标准化汇报材料
2014/02/03 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
技术股东合作协议书
2014/12/02 职场文书
中班下学期个人总结
2015/02/12 职场文书
矛盾论读书笔记
2015/06/29 职场文书