HTML5如何检测图片加载状态_HTML5检测加载状态方法【判断】

最直接方式是用 img.onload 和 img.onerror 监听原生事件，需在设置 src 前绑定；img.complete 可同步判断加载状态，结合 naturalWidth 区分有效/无效；跨域需设 crossOrigin；超时控制需 AbortController 或定时器。

用 img.onload 和 img.onerror 捕获加载结果

图片是否成功加载，最直接的方式是监听原生事件。浏览器在图片资源完成下载并解码后触发 onload；若 404、跨域拒绝、格式错误等导致失败，则触发 onerror。

注意：这两个事件只触发一次，且必须在设置 src 之前绑定，否则可能错过事件（尤其缓存命中时）。

• onload 不代表“视觉渲染完成”，仅表示解码就绪，后续仍可能因 css 隐藏、父容器未 display 而不可见
• onerror 无法区分是网络失败、CORS 错误还是图片损坏，需结合 img.naturalWidth === 0 做辅助判断
• 动态创建的 元素，不要在 src 赋值后再加监听器

const img = new Image(); img.onload = () => console.log('加载成功'); img.onerror = () => console.log('加载失败'); img.src = '/path/to/image.jpg'; // 必须放最后

用 img.complete 判断是否已加载（同步检查）

img.complete 是一个布尔属性，反映当前图片是否已完成加载（含缓存命中）。它适合在设置 src 后立即判断状态，但不能替代事件监听——因为它是静态快照，不响应后续变化。

• 若 img.complete === true 且 img.naturalWidth > 0，基本可确认加载成功
• 若 img.complete === true 但 img.naturalWidth === 0，大概率是图片损坏或空文件
• 若 img.complete === false，说明尚未加载完毕，此时应继续监听 onload/onerror

const img = document.querySelector('img'); if (img.complete) {   if (img.naturalWidth) {     console.log('已加载且有效');   } else {     console.log('已加载但无效（损坏/空）');   } } else {   img.onload = () => console.log('异步加载完成');   img.onerror = () => console.log('异步加载失败'); }

CORS 图片下 img.naturalWidth 可能为 0 的原因

当图片来自跨域服务器且未设置 access-Control-Allow-Origin，即使 onload 触发，浏览器也会限制读取尺寸信息，导致 img.naturalWidth 和 img.naturalHeight 返回 0。这不是加载失败，而是安全策略拦截。

立即学习“前端免费学习笔记（深入）”；

• 检查控制台是否有 “Unable to get image dimensions due to CORS policy” 类似报错
• 解决方式只有两种：服务端加 CORS 头，或前端用 crossOrigin="anonymous" 属性（前提是服务端允许）
• 加了 crossOrigin 后若仍失败，说明服务端未正确配置，此时 onerror 可能不触发，需靠定时轮询 complete + 尺寸判断

const img = new Image(); img.crossOrigin = 'anonymous'; // 必须在设置 src 前 img.src = 'https://other-domain.com/photo.png';

现代方案：用 AbortController 加超时控制

原生事件不提供超时机制，网络卡顿或服务无响应时会无限等待。可用 AbortController 配合 setTimeout 实现可控等待。

• 不是所有浏览器都支持 img.fetchPriority 或 loading="eager" 影响加载时机，超时仍是刚需
• 避免重复触发：清除定时器前先检查 img.complete，防止 onload/onerror 和 timeout 冲突
• 超时时间建议设为 10–15 秒，太短易误判，太长影响用户体验

function loadWithTimeout(src, timeout = 12000) {   return new Promise((resolve, reject) => {     const img = new Image();     const timer = setTimeout(() => {       if (!img.complete) reject(new Error('图片加载超时'));     }, timeout);      img.onload = () => {       clearTimeout(timer);       resolve(img);     };     img.onerror = () => {       clearTimeout(timer);       reject(new Error('图片加载失败'));     };     img.src = src;   }); }

实际项目中，真正难处理的是“加载成功但内容异常”（如透明图、1×1 占位图、服务返回 200 空响应），这时候单靠事件和尺寸远远不够，得结合服务端校验或图像哈希比对——但那已经超出 html5 原生能力范围了。