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>
Javascript 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
vue之延时刷新实例
Nov 14 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 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
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
python实现数通设备端口监控示例
2014/04/02 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
教师岗位职责
2015/02/03 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
劳动模范获奖感言
2015/07/31 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技