javascript设计模式实践之代理模式--图片预加载
图片的预加载就是在加载大图片前，先显示一个loading.gif，就算在网络比较慢的时候也能让人知道正在加载，总比啥反应都没有强。
下面这段代码就是预加载的一个简单的实现，假设先不处理加载图片时的onError，onAbort，超时的问题。
只关注代码的结构。
<!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'>
$(document).ready(function(){
$('#btnLoadImg').bind('click', doLoadImg);
}); function doLoadImg(){ var eleImg = createImgElement();
document.getElementById('imgContainer').appendChild(eleImg); loadImg(eleImg, 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg');
} //创建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;
};
})(); //预加载图片
//给img标签设一个加载图片，通过Image对象预先加载实际图片加载完成后设到img标签上
function loadImg(img, src) {
var imgCache = new Image();
imgCache.onload = function(){
img.src = this.src;
}; img.src = 'loading.gif';
imgCache.src = src;
} </script>
</body>
</html>
以下预加载的代码功能上是满足了，但是它的职责包含了预加载和加载两个职责，违反了“单一职责原则”。所谓的职责就是“会发生的变化”，如果网速的问题不再是问题或者加载的图片的分辨率被控制在很小的时候等，需要去掉预加载的功能，这时候就要修改loadImg的代码，就要重新跑所有相关的测试，即违反了“开闭原则”，又增加测试工作。
function loadImg(img, src) {
var imgCache = new Image();
imgCache.onload = function(){
img.src = this.src;
};
img.src = 'loading.gif';
imgCache.src = src;
}
加载和预加载其实就是代理模式的一种，代理模式可以理解成，你会开车但是因为某种原因只能找人代理开车，因为不了解MM的喜好找人代理送花。
将预加载功能改成代理模式可以理解成：本体先显示个门面，找代理去加载，加载完了，告诉本体，本体把图片贴上去就行了。
既然如此，本体的职责就很简单了，就往门面上贴。
加载本体函数：
function loadImg(img, src) {
img.src = src;
}
做一个预加载代理函数：
function loadImgProxy(img, src){
var imgCache = new Image();
imgCache.onload = function(){
loadImg(img, this.src);
};
loadImg(img, 'loading.gif');
imgCache.src = src;
}
在代理函数中，先让本体加载loading.gif，等大图加载完了再让本体加载实际图片。
代理还是和本体函数的接口参数是一致的，职责分的比较清晰，如果到时候要把预加载去掉，也不需要修改本体和代理的代码，只需要在调用的地方把代理的名字换成本体的名字即可。
可以适当的把代理函数改一下，可以让其适应加载多个图片的场景，其实就是做一个闭包，把缓存Image对象变成私有即可：
var loadImgProxy = (function(){
var imgCache = new Image();
return function(img, src){
imgCache.onload = function(){
loadImg(img, this.src);
};
loadImg(img, 'loading.gif');
imgCache.src = src;
};
})();
修改后的完整代码：
<!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'>
$(document).ready(function(){
$('#btnLoadImg').bind('click', doLoadImg);
}); function doLoadImg(){ var eleImg = createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//使用代理函数进行加载
//如果某一天不需要预加载了，就把loadImgProxy换成loadImg即可
loadImgProxy(eleImg, 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg');
} //创建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;
}
//加载图片代理函数
var loadImgProxy = (function(){
var imgCache = new Image(); return function(img, src){
imgCache.onload = function(){
loadImg(img, this.src);
}; loadImg(img, 'loading.gif');
imgCache.src = src;
};
})(); </script>
</body>
</html>
javascript设计模式实践之代理模式--图片预加载的更多相关文章
- javascript设计模式学习之六——代理模式
一.代理模式定义 代理模式的关键是:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问.代理模式需要和本体对外提供相同的接口,对用户来说是透明的.代理模式的种类有 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript兑现图片预加载【回调函数，多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- 再谈javascript图片预加载技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- javascript 图片预加载
<!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
随机推荐
- Word发布博客测试
/// <summary> /// Main相当于Windows服务的Start方法 主要负责初始化的工作 /// </summary> /// <param name= ...
- drag & resize元素的jQuery实现
有时项目中会遇到需要拖动元素.拖拽调整元素大小的需求.大部分时候都不想自己写一遍,因为已经有很多现成的例子了.例如jqueryui提供的drag和resize.但是仅仅是为了这么小一个功能就引入一个库 ...
- 3、CC2541芯片中级教程-OSAL操作系统（ADC光敏电阻和修改串口波特率）
本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 ...
- HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
- IOS 其它语言比较-Objc与JAVA的比较
1. Objc是一门编译型语言,JAVA是解析型语言 编译型语言:把做好的源程序全部编译成二进制代码的可运行程序.然后,可直接运行这个程序. 编译型语言,执行速度快.效率高:依赖编译器.跨平台性差些. ...
- ios 下创建，删除文件夹的方法
NSString *imageDir = [NSString stringWithFormat:@"%@/Caches/%@", NSHomeDirectory(), dirNam ...
- iOS xcode6 设置多语言
1,首先新建一个文件,选中ios模块下Rescource的Strings File 类型.eg:文件 2,选中该文件,右边栏选该文件属性,选中Localizable模块,选中localiz,这时会弹出 ...
- 说说设计模式~门面模式(Facade)
返回目录 门面模式(Facade)属于结构型模式的一种,它符合面向对象的封装原则,但又不符合开闭原则,呵呵,今天我们主要说它的优点,不谈缺点. 定义 门面模式,是指提供一个统一的接口去访问多个子系统的 ...
- 爱上MVC~一个Action多套View模版的设计
回到目录 模块化 这个问题是在做模块化设计时出现的,在Lind.DDD.Plugins模块里,需要对应的模块实体,模块管理者,模块标识接口等,开发时,如果你的功能点属于一个模块,需要实现IPlugin ...
- iOS 和 Android 测试托管平台 FIR.im 的注册与常用功能
FIR.im 作为专业的 iOS 和 Android 测试包发布网站, 注册超简单,支持输入网址直接下载和二维码扫描下载.功能类似 TestFlight ,但又比它强大,支持游客访问密码,iOS 和 ...