带回调的JS预加载图片

最新推荐文章于 2021-04-23 19:05:14 发布

转载最新推荐文章于 2021-04-23 19:05:14 发布 · 1k 阅读

程序人生专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行图片预加载的方法。通过创建Image对象并监听其加载状态，可以有效地管理网页中的图片资源加载过程。当图片已经在浏览器缓存中时，会立即触发回调；若图片未缓存，则在下载完成后调用回调函数。

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对象
    };
};