js如何判断图片是否已加载

解答思路

<img> 元素本身提供了 onload 和 onerror 两个事件：加载成功触发 onload，加载失败（地址错误、网络异常等）触发 onerror。

示例代码

const img = new Image();
img.onload = () => {
  console.log('图片加载成功');
};
img.onerror = () => {
  console.log('图片加载失败，展示兜底图');
  img.src = '/fallback.png';
};
img.src = 'https://example.com/pic.jpg';

也可以用 complete 属性判断图片是否已经加载完成（同步检查，无需等待事件）：

if (img.complete) {
  console.log('图片已经加载完成（或已缓存）');
}

详细说明

• onload：图片资源成功获取并解码完成后触发，是最常用的“加载完成”判断方式。
• onerror：图片请求失败（404、跨域、网络问题等）时触发，通常会在这里设置一张兜底图片。
• img.complete：布尔值，表示浏览器是否已经处理完这张图片（成功或失败都算），适合做同步的即时检查，比如图片已经命中浏览器缓存、onload 事件不会再触发的场景。

小结

判断图片加载状态优先使用 onload/onerror 事件；如果需要同步判断是否已经加载完成，可以配合 img.complete 属性。