看完了曼联与曼城的同城德比,还有漫长的两个小时,才能看到期待中的国家德比。无聊的很,左右无事,便来论坛闲逛。看到了一章关于图片预加载的博文,其代码如下:
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的调用。
转自:http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html#2087382
分享到:
相关推荐
HTML+jquery图片预加载功能,实用于web及移动端
jquery.lazyload图片预加载 调用简单 内有实例
图片预加载特效,
JS javascript 图片 预加载 实现图片的加载
经过自己的整理,能实现图片预加载效果的效果,有效减少带宽的占用,网页图片预加载效果
lazyload图片预加载js文件盒相关示例代码
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
站点实现预加载loading,但指定区域中图片未加载完,则实现自定义小图标,图片加载完后进入真正内容
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。
通过图片预加载技术,使得图片加载更为流畅,和谐。当图片的大小比较大时,图片也可以自动调整宽度和高度,同时图片也能居中。
瀑布流 图片预加载 实例
图片预加载插件---preload.js
用jQuery实现图片预加载,内含jquery1.3的js
NULL 博文链接:https://chen-miao.iteye.com/blog/1496730
要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。
手机页面预加载效果,一些预加载的效果!酷炫的加载效果
Javascript图片预加载,jquery插件。
使用 jquery + css + html,实现图片预加载的效果!