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实践--连续加载图片的更多相关文章

  1. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

  2. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  3. JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)

    开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...

  4. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  5. Jquery实现逐屏加载图片

    引用jquery.scrollLoading.js $(document).ready(function () { //实现图片慢慢浮现出来的效果 $("img").load(fu ...

  6. jQuery顺序加载图片(终版)

    这一篇是对上一篇(jQuery顺序加载图片(初版)--http://www.cnblogs.com/newbie-cc/p/3707504.html)的改进. function loadImage(i ...

  7. jQuery顺序加载图片(初版)

    浏览器加载图片区别: IE:同时加载与渲染 其他:加载完之后再渲染 根据这个差异用jQuery做个实例:按顺序加载一组图片,加载完成后提示. <!DOCTYPE html> <htm ...

  8. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  9. jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)

    jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)   瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...

随机推荐

  1. Windows Phone 8.1上的开发人员请看

    1)SDK选择:如果你是在Windows Phone 8.1上做一个新App, 或者想把7.x/8.0的App移植到8.1上,请使用WinRT SDK,而不是Silverlight.当然Silverl ...

  2. Dojo动画原理解析

    dojo中动画部分分为两部分:dojo/_base/fx, dojo/fx.dojo/_base/fx部分是dojo动画的基石,里面有两个底层API:animateProperty.anim和两个常用 ...

  3. 一个App完成入门篇(二)-搭建主框架

    通过第一课的学习,你已经掌握了如何通过debug调试器来跟PC上的设计器联调来实时查看UI设计效果.调试代码了,接下来通过一系列的demo开发教学你将很快上手学习到如何开发一个真正的App. 要开发A ...

  4. 关于"是否需要有代码规范"的个人看法

    这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我是个艺术家,手艺人,我有自己的规范和原则. 规范不能强求一律,应该允许很多例外. 我擅长制定编码规范,你们听我的 ...

  5. [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换

    [.net面向对象编程基础] (4)基础中的基础——数据类型转换 1.为什么要进行数据转换? 首先,为什么要进行数据转换,拿值类型例子说明一下, 比如:我们要把23角零钱,换成2.30元,就需要把整形 ...

  6. Beauty Contest

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28417#problem/F 题目大意:给n个点,求相聚最远距离的平方(输出整形) 集体思 ...

  7. Git 远程仓库搭建

    大名鼎鼎的git就不多做介绍了,总之.我们使用git来作为项目的一个版本控制工具,多人开发的项目的时候会轻松很多. 安装git whthomas@whthomas:~/workplace/gitOne ...

  8. java数学函数库 API(转)

    原文地址:http://www.24xuexi.com/w/2011-11-08/98206.html 首先给大家看看Math类所提供的主要方法,下面的列表给出了Math类的主要方法,如果要理解Mat ...

  9. iOS 获取键盘相关信息

    一,在需要的地方添加监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onKeyboardWil ...

  10. iOS给图片添加滤镜&使用openGLES动态渲染图片

    给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIF ...