程序博客网 > nba2k16樱木捏脸数据

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

来源：互联网发布：nba2k16樱木捏脸数据编辑：程序博客网时间：2024/05/15 06:22

http://blog.csdn.net/kongjiea/article/details/24308053

[html] view plain copy
<!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的调用。

阅读全文

0 0

nba2k16樱木捏脸数据

nba2k16樱木捏脸数据

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子废旧钢轨回收电动钢轨钻孔机钢轨探伤设备电动钢轨打磨机各种型号钢轨尺寸大全文库钢轨接头夹板钢轨生产厂家鸣人x钢手轮雏田动画鸣人x钢手轮雏田比翼鸟钢轮压路机鸣人x钢手轮小樱小型单钢轮压路机鸣人x钢手轮雏田钢轮压路机型号单钢轮压路机型号不锈钢轴钢针从奶孔刺入mp3 钢针全部刺入乳mp4 绵里钢针钢针图片钢针厂家钢针鱼拔钢针疼吗钢针枪微型钢针发射器打钢针钢钉骨折钢钉骨折打一根钢钉多少钱2018 骨折取钢钉一般需要住院多久骨折打钢钉有后遗症吗骨折打钢钉的危害骨折取钢钉要开刀吗钢钉卡取钢钉骨折打钢钉钢钉价格钢钉水泥钉钢钉图片钢钉规格钢钉厂家