关于图片的预加载过程中隐藏未知的


Posted in Javascript onDecember 19, 2012

看完了曼联与曼城的同城德比,还有漫长的两个小时,才能看到期待中的国家德比。无聊的很,左右无事,便来论坛闲逛。看到了一章关于图片预加载的博文,其代码如下:

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象,实现图片的预下载 
img.src = url; 
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
callback(img); 
return; // 直接返回,不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback(img); 
}; 
};

在网上搜索了一下相关文章,大体上都是这个思路。
这个方法功能是ok的,但是有一些隐患。
1 创建了一个临时匿名函数来作为图片的onload事件处理函数,形成了闭包。
相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏。(这种模式的内存泄漏只存在低版本的ie6中,打过补丁的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题)。

2 只考虑了静态图片的加载,忽略了gif等动态图片,这些动态图片可能会多次触发onload。
要解决上面两个问题很简单,其实很简单,代码如下:

img.onload = function () { 
//图片下载完毕时异步调用callback函数。 
img.onload = null; 
callback(img); };

这样既能解决内存泄漏的问题,又能避免动态图片的事件多次触发问题。
在一些相关博文中,也有人注意到了要把img.onload 设置为null,只不过时机不对,大部分文章都是在callback运行以后,才将img.onload设置为null,这样虽然能解决循环引用的问题,但是对于动态图片来说,如果callback运行比较耗时的话,还是有多次触发的隐患的。
隐患经过上面的修改后,就消除了,但是这个代码还有优化的余地:
if (img.complete) { 
// 如果图片已经存在于浏览器缓存,直接调用回调函数 
callback(img); 
return; // 直接返回,不用再处理onload事件 
}

关于这段代码,看相关博文里的叙述,原因如下:
经过对多个浏览器版本的测试,发现ie、opera下,当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们试图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。

确实,在ie,opera下,对于缓存图片的初始状态,与firefox和safari,chrome下是不一样的(有兴趣的话,可以在不同浏览器下,测试一下在给img的src赋值缓存图片的url之前,img的状态),但是对onload事件的触发,却是一致的,不管是什么浏览器。产生这个问题的根本原因在于,img的src赋值与 onload事件的绑定,顺序不对(在ie和opera下,先赋值src,再赋值onload,因为是缓存图片,就错过了onload事件的触发)。应该先绑定onload事件,然后再给src赋值,代码如下:

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象,实现图片的预下载 
img.onload = function(){ 
img.onload = null; 
callback(img); 
} 
img.src = url; 
} 
这样内存泄漏,动态图片的加载问题都得到了解决,而且也以统一的方式,实现了callback的调用。
Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 #Javascript
img onload事件绑定各浏览器均可执行
Dec 19 #Javascript
JavaScript实现快速排序(自已编写)
Dec 19 #Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 #Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 #Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 #Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 #Javascript
You might like
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python 调用c语言函数的方法
2017/09/29 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
学校实习推荐信
2015/03/27 职场文书
小学生读书笔记范文
2015/06/30 职场文书
小学语文国培研修日志
2015/11/13 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
python简单验证码识别的实现过程
2021/06/20 Python
nginx请求限制配置方法
2021/07/09 Servers
Oracle表空间与权限的深入讲解
2021/11/17 Oracle