img.onload 实现图片预加载方法

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="jQuery.js"></script>

</head>
<body>
    <div class="box">
       <div> 1111</div>
    </div>
<script type="text/javascript">
function loadImage(url,callback) {     
    var img =new Image();
    img.onload =function(){
        img.onload =null;
        callback(img);
    }
    img.src = url; 
}

function call(img){
    $(img).appendTo('.box');
}
// loadImage('http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg',call);
loadImage('http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg',call);

    </script>
</body>
</html>

文章讲解:

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的调用。

  • 1
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值