JavaScript图片预加载应该注意的几点

标签: 前端开发 JavaScript 代码实例 图片预加载 | 发表时间:2012-01-16 07:03 | 作者:直觉
出处:http://www.kekaku.com

下面的代码是前段时间无聊的时候在论坛闲逛看到的一篇关于图片预加载的文章,其实写的不错,代码如下:

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载<span id="more-844"></span>
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的调用。

您可能也喜欢:

發掘你平常沒有注意的美麗角落 – Patrik Lindell (@mydesy)

10件住在宇宙需要注意的事情 (@mydesy)

JS照片墙代码实例

20个将JavaScript推到极致的网站

10个超级实用的JavaScript开发工具
无觅

相关 [javascript 图片 加载] 推荐:

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

JavaScript图片预加载应该注意的几点

- - 可咔酷 | 网络杂货铺
下面的代码是前段时间无聊的时候在论坛闲逛看到的一篇关于图片预加载的文章,其实写的不错,代码如下:. 在网上搜索了一下相关文章,大体上都是这个思路. 这个方法功能是ok的,但是有一些隐患. 1 创建了一个临时匿名函数来作为图片的onload事件处理函数,形成了闭包. 相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏.

javascript图片切换

- Haipeng - 博客园-首页原创精华区
闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之. 1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸.

Javascript文件加载:LABjs和RequireJS

- Pstrey - 阮一峰的网络日志
传统上,加载Javascript文件都是使用