loading="lazy"降级失效的根本原因是未提供fallback路径，导致不支持浏览器忽略该属性且不自动回退到data-src，若src为空或失效则白屏；必须始终让src指向可用资源（如1×1 gif），data-src静态写入html，并避免display:none等css陷阱。
有，而且降级失效往往悄无声息——图片白屏、控制台零报错、只在旧版 Android 或 IE 里出问题，是最典型的兼容陷阱。
loading="lazy" 在不支持浏览器里根本不会 fallback 到 src
很多人以为加了 loading="lazy" 就万事大吉，其实它只是个“建议”，不支持的浏览器（如 IE11、Android 4.4 WebView、部分 Safari 12 以下）会直接忽略该属性，但不会自动把 data-src 赋给 src。如果此时 src 是空值或占位图路径失效，结果就是白屏。
-
src必须始终指向一个可加载资源：推荐 1×1 透明 GIF（data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==）或 SSR 渲染的真实小图 -
data-src必须静态写在 HTML 中（不能靠 JS 动态setAttribute注入），否则断网时 JS 加载失败，它就不存在 - 服务端渲染首屏图片时，
src应直接为高清图地址，跳过懒加载逻辑，避免客户端 JS 失效导致空白
picture / srcset 在旧环境里容易整块失效
<picture></picture> 结构看似健壮，但 Android 4.4 WebView 和 IE11 对 srcset 解析极差，<source media></source> 和 <source type></source> 混用时，整个 <picture></picture> 块可能被跳过，最终连 <img> 的 fallback 都不触发。
- 永远保留
<img src="fallback.jpg">作为<picture></picture>内部最末节点——这是唯一能被所有浏览器识别的兜底 - 避免在同一个
<source></source>里同时写media和type，旧浏览器解析失败后常静默丢弃整条<source></source> - 对 Android 4.4 及更早 WebView，建议改用
data-srcset+ JS 检测后手动赋值srcset，比纯 HTML 更可控
display: none 容器里的图片在 Safari/WebView 中永不触发 lazy 加载
这不是 bug，是规范行为：loading="lazy" 依赖元素是否进入 viewport，而 display: none 的元素在大多数浏览器（尤其是 Safari 和多数 Android WebView）中被视为“不可见且不可测量”，IntersectionObserver 不会监听它，即使后来 JS 把它改成 display: block，也不会补触发加载。
- 改用
opacity: 0或visibility: hidden替代display: none，它们不影响 lazy 加载时机 - 若必须用
display: none（比如 tab 切换），需在显示前手动调用img.src = img.dataset.src强制加载 - 未设宽高或
aspect-ratio的图片，在 lazy 加载完成前会塌陷容器，造成布局抖动——这在弱网下尤为明显
最容易被忽略的点是：**降级不是“有 fallback 就行”，而是“在 JS 失效、网络中断、解析器跳过、CSS 隐藏”等任意一环断裂时，仍能保证图片至少以某种形式出现**。很多团队只测了 Chrome 正常加载，却没关掉 JS 或切到离线模式再验证一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
