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

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

abxn2002

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

阅读量2.9k

点赞数

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

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

75 篇文章

订阅专栏

本文介绍了一种图片预加载方法及其事件触发机制。通过使用JavaScript实现图片预加载，利用img.complete判断图片是否已加载，进而决定直接调用回调函数还是等待onload事件触发。示例代码展示了如何在按钮点击事件中加载图片并执行相应的回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载出处: http://blog.youkuaiyun.com/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" onclick="loadImag('xxx.jpg',imgLoaded)"/>
</body>

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

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