最常出现的问题是图片被加载两次、src被覆盖丢失或断网后白屏，根本原因是浏览器原生懒加载与JS降级逻辑同时操作同一张图的src且无时机协调。
loading="lazy" 和降级逻辑（如 data-src + IntersectionObserver）混用时，最常出现的不是“没效果”，而是图片被加载两次、src 被覆盖丢失、或断网后白屏——根本原因是浏览器和 JS 同时在操作同一张图的 src，且没有协调时机。
为什么 loading="lazy" 和 data-src 一起写会冲突
浏览器解析到 <img src="placeholder.jpg" loading="lazy" alt="如何在HTML中处理图片降级与懒加载冲突" > 时，原生懒加载机制会在进入视口时自动发起对 src 的请求；而你的 JS 也在同一时刻监听到该元素进入视口，立刻执行 img.src = img.dataset.src。结果是：两次网络请求、第二次可能覆盖第一次的解码状态、甚至因竞态导致 src 被设为空。
- Chrome / Firefox 会优先走原生逻辑，JS 修改
src可能被忽略或触发重复加载 - Safari（尤其 15.4 之前）压根不支持
loading="lazy"，但又不报错，JS 逻辑若未兜底，src就一直卡在占位图 - 如果 SSR 渲染时已写死
src="real.jpg"，再加loading="lazy"，旧浏览器会立即加载，JS 降级代码反而成了冗余干扰
怎么选：纯原生 or 纯 JS 降级
别混合。二者定位不同，强行共存只会增加维护成本和不确定性。
- 用纯原生：
loading="lazy"+srcset+sizes，不写任何data-src或初始化 Observer。适用于 Chrome 76+ / Firefox 75+ / Safari 15.4+ 占比 >95% 的业务（如官网、营销页） - 用纯 JS 降级：移除所有
loading="lazy"，只保留src="placeholder.jpg"和，由IntersectionObserver统一控制赋值。适用于需兼容 iOS 14.x、安卓 WebView 旧版、或微信内嵌 H5（部分版本仍用 X5 内核） - 混合场景唯一可行路径：SSR 输出
loading="lazy"，客户端 hydrate 后立刻把src暂存进data-src并清空src，后续全交由 JS 控制——但这要求服务端和前端生命周期严格对齐，稍有错位就白屏
data-src 赋值时最容易漏掉的三件事
即使你决定用 JS 降级，data-src 不是写上就完事。以下三点漏掉任一，断网或弱网下大概率失败：
立即学习“前端免费学习笔记（深入）”；
-
data-src必须在 HTML 字符串中静态存在，不能靠 JS 动态插入——否则 JS 加载失败，data-src根本不存在 - 赋值前必须检查
img.naturalWidth === 0或监听onerror，失败后要 fallback 到备用图或隐藏元素，不能静默吞掉错误 - 不要直接读
img.srcset来还原响应式地址，它可能已被浏览器改写；应从img.dataset.srcset取原始值，再同步设给img.srcset
真正难的不是写对 loading="lazy"，而是想清楚：当 JS 加载失败、网络中断、用户禁用 JS、或滚动容器不是 window 时，图片是否还能以最小代价展示出来。这个“最小代价”往往就是一张 1px GIF 占位图 + 静态 data-src + 内联的 observer 初始化代码——其余全是可选优化。
