电商图片断网白屏的根本原因是html降级缺失：src为空或无效、data-src动态注入、首屏图误用loading="lazy"且无fallback；必须确保src始终指向可用资源，data-src静态存在，关键图禁用懒加载，并内联带兜底的intersectionobserver初始化代码。
电商图片降级失败，八成不是 JS 没跑通，而是 HTML 层没留退路——src 空、data-src 动态注入、首屏图加了 loading="lazy" 却没 fallback，断网时直接白屏。
为什么电商图一断网就全白？
电商页面对图片可靠性要求极高：商品主图、SKU 图、详情图都得“至少能看见”。但很多团队只加 loading="lazy"，却让 src 指向空值或占位图 URL（如 src="" 或 src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs"），而真实图地址全塞在 data-src 里。浏览器不支持 loading 时，它不会读 data-src，只会按默认逻辑加载 src ——结果就是空盒或 1px GIF，用户看到一片白。
更隐蔽的问题是 SSR 渲染阶段：如果服务端没把首屏图的 src 写成真实可访问地址（比如仍为占位图），而依赖客户端 JS 补充，那 JS 加载失败 = 首屏商品图集体消失。
-
src必须始终指向一个可用资源：可以是低质占位图（如 1px GIF）、LQIP base64 图，或 SSR 渲染出的真实小图；绝不能为空或 404 路径 -
data-src必须静态存在于 HTML 中（不能靠 JS 注入），否则断网时根本不存在 - 首屏关键图（如商品主图、SKU 缩略图）必须跳过懒加载：
loading="eager"或干脆不写该属性
怎么写 HTML 才让降级真正生效？
可靠降级不是“有就用，没有就算”，而是让 DOM 在任意网络状态下都能呈现内容。核心是三段式结构：
复制AI写代码
<picture><source type="image/avif" srcset="product-400w.avif 400w, product-800w.avif 800w" sizes="(max-width: 768px) 100vw, 50vw"><source type="image/webp" srcset="product-400w.webp 400w, product-800w.webp 800w" sizes="(max-width: 768px) 100vw, 50vw"> @@##@@ </source></source></picture>
-
<picture></picture>是现代格式兜底的唯一标准方式；<source></source>不允许带src，只支持srcset+sizes - 最后一层
<img src="product-400w.jpg" srcset="product-400w.jpg 400w, product-800w.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="红色连衣裙正面图" style="max-width:90%" style="max-width:90%" loading="eager">的src必须是真实可访问的 JPEG/PNG，且尺寸与srcset中最小项一致（如 400w） -
width和height必须存在，否则 Safari 和部分 Android WebView 会放弃懒加载逻辑，甚至错载大图 - 首屏图禁用
loading="lazy"，用loading="eager"显式声明，避免 SSR 流程中被误判为非关键资源
JS 初始化必须内联且带 failover
电商页面常依赖 JS 控制懒加载行为（比如预加载临近 SKU 图、错误回退到备用 CDN）。但如果 JS 文件加载失败，整个图片系统就瘫痪。应对方式很实在：
- 把核心
IntersectionObserver初始化代码内联进<script></script>标签，不走外部请求 - 用
if ('IntersectionObserver' in window)检测，但检测失败时必须立刻执行 fallback：document.querySelectorAll('img[data-src]').forEach(img => img.src = img.dataset.src) - 对新插入的商品卡片（如筛选后重绘列表），不要等滚动再触发，插入后立即检查
img.getBoundingClientRect().top ，符合条件就赋值 <code>src - 避免在 observer 回调里做 DOM 重排操作（如修改父容器 class）、AJAX 请求或复杂计算，只干两件事：赋值
src、调用unobserve()
CSS 层最容易被忽略的失效点
很多团队花力气写 JS 降级，却忘了样式也能让懒加载“静默失效”：
-
display: none会让 Safari 和多数 Android WebView 直接跳过该<img>，即使后来display改成block，也不会重新触发加载 -
opacity: 0或visibility: hidden不影响懒加载触发，但若 JS 断网没执行，CSS 动画不启动，用户看到的就是透明黑块 - 没设
aspect-ratio或宽高，图片加载前盒模型塌陷，文字上推；尤其在商品网格中，会导致整行错位、CLS 值飙升 - 父容器设了
overflow: hidden，某些版本 Chrome 会截断懒加载判断区域，导致图片永远不触发
真正难的不是写多少代码，而是确保每个环节都预留“断网还能活”的路径：HTML 里 src 不能空，data-src 不能动态，<picture></picture> 末尾 <img> 必须真能加载；JS 必须内联且带兜底；CSS 不能用 display: none 隐藏待加载图——这些细节漏掉任何一环，电商页面的降级就只是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
