转_关于图片的预加载

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。

在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