现代图片降级必须确保src始终可加载、data-src或srcset可失效、js失败时仍有退路，否则断网或旧浏览器下将白屏；loading="lazy"+data-src会白屏是因为不支持该属性的浏览器只加载src，若src为空、错误或被css隐藏则图片不显示。
现代图片降级不是“加个 fallback 就完事”，而是必须让 src 始终可加载、data-src 或 srcset 可失效、JS 失败时仍有退路——否则断网或旧浏览器下就是白屏。
为什么 loading="lazy" + data-src 会白屏？
根本问题在于：浏览器不支持 loading="lazy" 时，它不会读取或触发 data-src；它只按原生逻辑加载 src。如果 src 是空、占位图路径错误、或被 CSS 隐藏（如 display: none），图片就彻底不出现。
-
src必须指向一个真实可用的资源：1px GIF、LQIP 模糊图、或 SSR 渲染出的小图，绝不能是""或"#" -
data-src必须静态写在 HTML 中（不能靠 JS 注入），否则断网时 JS 加载失败，data-src根本不存在 - 不要用
display: none包裹懒加载图片容器——Safari 和多数 Android WebView 会直接跳过该元素，后续显示也无效
picture 标签中 img 的 src 不是“备用”，而是最终渲染载体
<picture></picture> 的设计逻辑是：<source></source> 只负责匹配媒体条件和格式，但**所有 <source></source> 加载失败 ≠ 自动用 <img> 回退**；它仍会尝试加载 <img> 的 src。若这个 src 也 404，就只剩 alt 文本。
- ✅ 正确做法：把
<img>的src指向一个高可用默认图（如 CDN 托管的占位图或业务主图） - ⚠️ 错误写法：
<img src="broken.jpg" alt="...">—— 一旦broken.jpg404，整个<picture></picture>就退化为纯文本 - ? 进阶选择：用
onerror内联修正，但必须加this.onerror=null防止循环调用：onerror="this.src='/fallback.jpg'; this.onerror=null;"
JS 初始化必须内联 + 特性检测后立即兜底
把懒加载逻辑全放外部 JS 文件里，等于把图片加载权交给网络——JS 请求失败，图片一张都不加载。
- 把 IntersectionObserver 初始化代码内联进
<script></script>标签，不发额外请求 - 用
if ('IntersectionObserver' in window)检测，但检测失败时**必须立刻执行兜底动作**：document.querySelectorAll('img[data-src]').forEach(img => img.src = img.dataset.src) - 对首屏关键图（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
最容易被忽略的降级盲区：CSS 与服务端
很多团队花力气写 JS 降级，却忘了样式和 SSR 层也能让整套方案失效。
- 没设宽高或
aspect-ratio？图片加载前容器塌陷，布局抖动，用户看到空白块 - SSR 渲染时，首屏
<img>的src必须是真实可访问地址，不能依赖客户端 JS 补充——否则断网时首屏直接空白 -
opacity: 0或visibility: hidden不影响懒加载触发，但 JS 断网未执行时，这些样式也不会被移除，用户看到的就是黑块或空白
真正健壮的降级，是让每个环节都“自己能活”：HTML 有可用 src，CSS 不破坏占位，JS 失败时有同步兜底，SSR 输出即可用。不是靠一层层 try-catch，而是从结构上杜绝单点失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
