js 判断图片是否加载完成

最新推荐文章于 2025-05-19 14:35:28 发布

转载最新推荐文章于 2025-05-19 14:35:28 发布 · 490 阅读

前台 web 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用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对象
    };
};