码迷,mamicode.com
首页 > 编程语言 > 详细

[转]Javascript实现图片的预加载

时间:2015-02-28 16:02:21      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:

做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:

技术分享function preLoadImg(url) {
技术分享  var img = new Image();
技术分享  img.src = url;
技术分享}


通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这 个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用一些异步的方法,等到图片 下载完毕的时候才会再对img的width和height进行调用。

实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:

技术分享function loadImage(url, callback) {
技术分享  var img = new Image();
技术分享  img.src = url;
技术分享
技术分享  img.onload = function()//图片下载完毕时异步调用callback函数。
技术分享    callback.call(img);   // 将callback函数this指针切换为img。
技术分享  };
技术分享}



好了,再来写一个测试用例。

技术分享function imgLoaded(){
技术分享  alert(this.width);
技术分享}
技术分享<input type="button" value="loadImage" onclick="loadImage(‘aaa.jpg‘,imgLoaded)"/>
技术分享


在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。

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

怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。

经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:

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


经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了。

代码如下:

 

技术分享
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实现图片的预加载

标签:

原文地址:http://www.cnblogs.com/hujianglie/p/4305343.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!