JavaScript中预加载图片及callback回调方法的使用。

最新推荐文章于 2022-10-25 07:59:48 发布

abxn2002

最新推荐文章于 2022-10-25 07:59:48 发布

阅读量2.8k

点赞数

分类专栏： javascript学习笔记文章标签： callback javascript 浏览器 function image url

javascript学习笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

转载出处: http://blog.csdn.net/numb1126/article/details/2998929

 
 <head>
<script type="text/javascript">
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 imgLoaded(){
alert(this.width);
}
</script>
</head>
<body>
<input type="button" value="loadImage" οnclick="loadImag('xxx.jpg',imgLoaded)"/>
</body>
 

这是一个完整的示例，不知道原作者是谁了- -！

我只负责解释一下，img.complete方法表示图片是否加载完成，如果已经被浏览器缓存，则返回true。而onload方法表示第1次加载此图片，浏览器之前没有缓存过，一般来说，第1次访问此网页，那么会触发onload事件，而以后就是触发conplete事件了。方法执行到img.onload或complete这行时，将暂停往下执行，等待图片加载，一但完成，则执行function(){}里的代码。直接写个callback，则表示执行οnclick="loadImag('xxx.jpg',imgLoaded)执行中第2个参数传过来的方法。而这个方法里用了this.width，那么这个this表示的本是function loadImage这个函数，并没有width属性，所以用callback.call(AAA)来将this替换为括号内的AAA。