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

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>
(0)

相关推荐

  • 详解JavaScript异步编程中jQuery的promise对象的作用

    Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行

  • jQuery的promise与deferred对象在异步回调中的作用

    一.前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念. Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码. jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规范进行实现,有一些API上的差异. 好,让我们来看看他们的特性吧( 本文示例基于jquery 1.8版本以上 ). 二.示例 以前写动画时,我们通常是这么干的: $('.animateE

  • 在jQuery1.5中使用deferred对象 着放大镜看Promise

    引言在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中(译文见这里),有下面一段描述: $.ajax() returns an object packed with other deferred-related methods. I discussed promise(), but you'll also find then(), success(), error(), and a host of others. You don't have access to the c

  • jQuery中的Deferred和promise 的区别

    Deferred和Promise之间有什么区别呢? promise 一个promise就是一个由 异步函数返回的对象 .当你想要自己编写一个这样的函数时你需要使用一个deferred. var promise = $.ajax({ url: "/myServerScript" }); promise.done(mySuccessFunction); promise.fail(myErrorFunction); var promise = $.ajax({ url: "/myS

  • 以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

    Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成. 在一些现代浏览器中已经提供了原生的Promise对象,其遵循Promise/A+标准.在jQuery1.5+,提供了$.Deferred(其可以被转化为promise对象).很多知名的框架中,也提供了promise对象.promise对象在javascript中已经是一种很重要的模式,它在解决异步问题时表现出的优雅,正是javascript

  • 深入解析jQuery中Deferred的deferred.promise()方法

    deferred.promise() 和 .promise() 这两个API语法几乎一样,但是有着很大的差别.deferred.promise()是Deferred实例的一个方法,他返回一个Deferred.Promise实例.一个Deferred.Promise对象可以理解为是deferred对象的一个视图,它只包含deferred对象的一组方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个def

  • jQuery Deferred和Promise创建响应式应用程序详细介绍

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首次亮相于 流行的 JavaScript 库 jQuery(已经是1.5版本的事情了). Deferred 提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 "promise" 对象,其目的是在未来某个时间点返回一个响应.如果您之前没有接触过 "promis

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

    Promise是CommonJS的规范之一,拥有resolve.reject.done.fail.then等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套.如今异步在web开发中越来越重要,对于开发人员来说,这种非线性执行的编程会让开发者觉得难以掌控,而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象,年底即将发布的ES6也将原生实现Promise. 在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能.

  • jQuery滚动加载图片实现原理

    本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

  • jQuery 实现图片的依次加载图片功能

    css代码: ul#portfolio{margin:0;padding:0;} ul#portfolio li{float: left;margin:0 5px 0 0;width:250px;height: 250px;list-style: none;} ul#portfolio li.loading{background: url(../images/spinner.gif) no-repeat center center;} ul#portfolio li img{width:250p

  • jquery动态加载图片数据练习代码

    这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片. 思路: 1.首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片. 2.建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求. 3.然后当然要用到数据库啦,包括图片的路径,描述等信息.每张小图片路径应该对应一张大图

  • 如何解决jQuery EasyUI 已打开Tab重新加载问题

    先给大家说下我的需求,如下: 点击左侧已经打开的tab可以刷新重新加载datagrid. 也就是说解决easyui 左侧tab重新刷新加载问题实现. 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :<span style="font-family: Arial, Helv

  • jQuery实现按钮点击遮罩加载及处理完后恢复的效果

    本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %> <!DOCTYPE html PUBLIC "-//W3C//D

  • JQuery实现Ajax加载图片的方法

    本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来. 页面元素: <input class="picbtn" type="button" value="Next" /> <

  • jQuery实现预加载图片的方法

    本文实例讲述了jQuery实现预加载图片的方法.分享给大家供大家参考.具体分析如下: 这段js代码用于预加载图片,记住是预加载,不是后加载哟,就是在图片还不显示的时候就将图片下载到用户浏览器的缓存中,这样要显示的时候就非常快,无需再到服务器上去读取图片. jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr('src', arg

  • JQuery ztree带筛选、异步加载实例讲解

    本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

  • jquery预加载图片的方法

    本文实例讲述了jquery预加载图片的方法.分享给大家供大家参考.具体如下: 这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验. function preloadImages(oImageList, callback) { if ( typeof (oImageList) == 'object' && typeof (callback) === "function") { var iCallbackAfter = oImageList

随机推荐