html图片懒加载不处理加载失败，需结合onerror手动实现带退避策略的自动重试：先存真实url于data-src，触发加载时赋值带时间戳的src并绑定onerror，重试前清空src、限制次数（≤3）、延时递增，并注意srcset同步、定时器清理及框架卸载防护。
HTML图片懒加载本身不处理加载失败问题，它只控制“何时开始加载”，而加载异常（如404、网络中断、跨域拒绝）需要额外用JavaScript捕获并干预。自动重试不是懒加载的内置能力，而是要在懒加载逻辑中叠加错误响应机制。
懒加载 + onerror 自动重试的关键步骤
当使用 loading="lazy" 时，onerror 仍可监听失败，但要注意：浏览器可能在懒加载触发前就已执行了 onerror（尤其在某些降级场景），所以重试逻辑必须绑定到真实加载动作上，而非仅靠初始 HTML 的 onerror。
- 确保图片真实 URL 存在
data-src中（不要直接写在src），懒加载触发后才赋值src，这样onerror才能准确对应本次请求 - 给
<img>添加onerror="handleImageError(this)"，并在函数中实现重试计数、退避延迟和最终失败提示 - 每次重试前清空
src（设为""或占位图），再重新赋值带时间戳的data-src，避免浏览器缓存失败响应 - 限制最大重试次数（建议 ≤3 次），第 1 次立即重试，第 2 次延时 500ms，第 3 次延时 1s，防止反复失败阻塞主线程
结合 IntersectionObserver 的完整示例
这是兼容现代浏览器且支持自动重试的推荐写法，适用于首屏外图片：
- HTML 中用
data-src存真实地址，src设为轻量 base64 占位图 - JS 创建
IntersectionObserver，进入视口时调用loadImage(img) -
loadImage()内部设置img.src = img.dataset.src + '?t=' + Date.now()，并绑定onerror回调 - 错误回调里检查
img.dataset.retryCount，未超限则递增后再次调用loadImage()；超限则添加failed类，显示“加载失败”文案
表格或复杂布局中的注意事项
在 <table> 或嵌套 <code>transform 容器中，loading="lazy" 常失效，必须手动控制加载——这也让重试更容易统一管理：
- 把重试逻辑封装进一个函数（如
retryImage(img, max = 3)），无论从滚动、点击还是定时检测触发，都走同一入口 - 对
srcset图片，重试时需同步更新srcset和sizes，不能只改src，否则高 DPR 设备可能加载错尺寸资源 - 禁用按钮或禁用重试操作前，先清除已有定时器（
clearTimeout(img._retryTimer)），避免多次重试并发 - 非同源图片无法通过 JS 判断是否真失败，此时重试只能依赖超时 + 用户交互，不宜全自动
不建议的做法
有些方案看似简单，实则容易引发问题：
- 在
onerror里直接写this.src = this.src—— 浏览器可能复用失败缓存，导致无限循环失败 - 用
location.reload()或刷新 iframe 来“重试”—— 这会刷新整个页面或容器，破坏用户体验 - 对所有图片无差别加重试，却不设上限或退避 —— 网络差时大量并发请求会加剧拥塞
- 在 Vue/React 等框架中，把重试逻辑写在模板事件里（如
@error="retry"），未考虑组件卸载后回调仍执行的风险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
