JavaScript中如何检测图片是否加载完成

在JavaScript中检测图片是否加载完成，可以根据不同的使用场景选择对应的实现方案，下面详细介绍几种常用的实现方式。

单张图片加载完成检测

使用onload事件

最基础的检测方式是给Image对象绑定onload事件，当图片资源加载完成后会触发该事件的回调，在回调中执行业务逻辑即可。

// 创建图片对象
const img = new Image();
// 绑定加载完成回调
img.onload = function() {
    console.log('图片加载完成');
    console.log('图片宽度：', img.width);
    console.log('图片高度：', img.height);
};
// 绑定加载失败回调
img.onerror = function() {
    console.log('图片加载失败');
};
// 设置图片地址，触发加载
img.src = 'https://ipipp.com/sample.jpg';

使用addEventListener监听load事件

也可以使用标准的事件监听方式来绑定load事件，这种方式支持后续移除事件监听，更加灵活。

const img = new Image();
// 监听load事件
img.addEventListener('load', () => {
    console.log('图片加载完成');
});
// 监听error事件
img.addEventListener('error', () => {
    console.log('图片加载失败');
});
img.src = 'https://ipipp.com/sample.jpg';

多张图片加载完成检测

如果需要检测多张图片是否全部加载完成，可以通过计数器的方式实现，统计已加载完成的图片数量，当数量等于总图片数量时判断全部加载完成。

/**
 * 检测多张图片是否全部加载完成
 * @param {Array} imgUrls 图片地址数组
 * @param {Function} callback 全部加载完成后的回调
 */
function checkAllImagesLoaded(imgUrls, callback) {
    let loadedCount = 0;
    const total = imgUrls.length;
    // 如果没有图片，直接执行回调
    if (total === 0) {
        callback();
        return;
    }
    imgUrls.forEach(url => {
        const img = new Image();
        img.onload = () => {
            loadedCount++;
            // 所有图片都加载完成
            if (loadedCount === total) {
                callback();
            }
        };
        img.onerror = () => {
            loadedCount++;
            // 即使加载失败也计数，避免一直等待
            if (loadedCount === total) {
                callback();
            }
        };
        img.src = url;
    });
}

// 使用示例
const imgList = [
    'https://ipipp.com/img1.jpg',
    'https://ipipp.com/img2.jpg',
    'https://ipipp.com/img3.jpg'
];
checkAllImagesLoaded(imgList, () => {
    console.log('所有图片加载完成');
});

注意事项

• 如果图片是从缓存中读取的，部分浏览器中onload事件可能不会触发，因此建议先设置src属性前先绑定事件，或者在设置src之前先判断complete属性。
• 对于已经存在于DOM中的img元素，可以直接获取该元素来绑定事件，不需要重新创建Image对象。
• 如果图片地址可能无效，一定要绑定onerror或者error事件，避免加载失败导致相关逻辑无法执行。

下面是处理缓存场景的示例代码，先判断complete属性，再决定是否绑定事件：

const imgElement = document.querySelector('#targetImg');
// 如果图片已经加载完成，直接执行逻辑
if (imgElement.complete) {
    console.log('图片已加载完成');
} else {
    // 否则绑定加载完成事件
    imgElement.onload = () => {
        console.log('图片加载完成');
    };
    imgElement.onerror = () => {
        console.log('图片加载失败');
    };
}

JavaScriptimg_loadimage_loading_detectiononload_event修改时间：2026-06-07 03:13:58