loading="lazy"断网白屏的根本原因是src为空或无效且无fallback，必须让src始终指向静态可用资源（如1px GIF）、data-src存高清地址并静态存在于HTML中，同时规避display:none等CSS陷阱。
HTML图片加载慢时主动降级，核心不是“等它失败再补救”，而是提前把 fallback 路径写死在 DOM 里——src 必须始终指向可用资源，data-src 存高清地址，且两者都得静态存在于 HTML 中。
为什么 loading="lazy" 一断网就白屏
浏览器不支持 loading="lazy" 时，它不会报错，也不会自动读取 data-src；它只是当这个属性不存在，然后按默认逻辑加载 src。如果 src 是空、占位符路径错误、或指向一个 JS 动态生成的 URL（比如 src="/img/logo?w=800"），断网时就会白屏。
-
src必须是静态可直访的路径，推荐用 1px GIF、LQIP 模糊图，或 SSR 渲染出的真实小图 -
data-src必须在 HTML 源码里就存在，不能靠 JS 注入；否则 JS 加载失败，data-src根本不存在 - 服务端渲染必须确保首屏图片的
src是真实可访问地址，不能只依赖客户端 JS 补全
如何写一个不依赖 JS 的降级结构
关键在于：让图片在任何网络/JS 状态下都有内容可呈现。不需要等 JS 初始化，也不需要 IntersectionObserver 支持。
- 用
<picture>+ 多个<source>实现格式降级，顺序为image/avif→image/webp→image/jpeg，最后必须带<img src="fallback.jpg" alt="..."> -
type值必须严格匹配标准 MIME 类型：image/avif、image/webp、image/jpeg（不是image/jpg） - 服务器返回的
Content-Type必须和type一致，否则 Safari 会静默跳过 - 避免把
<img>的src指向 WebP/AVIF —— 它无法被旧浏览器识别，起不到兜底作用
error 事件降级只能补漏，不能当主方案
error 事件监听确实能捕获路径错误，但它发生在图片请求失败之后，用户已经看到空白或占位符了。它适合开发阶段快速定位坏路径，但不能替代预设 fallback。
立即学习“前端免费学习笔记（深入）”；
- 全局监听写法：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { e.target.src = '/assets/placeholder.svg'; })) - 它对 404 有效，但对 406（Not Acceptable）、CORS 阻断、MIME 不匹配等静默失败无效
- 不能解决首屏白屏问题，因为
error是异步触发，且需 JS 执行完成 - 真正可靠的降级，是让
src从一开始就不可能失败
最容易被忽略的 CSS 陷阱
很多团队花力气写 JS 降级，却忘了样式层也能让图片“永远不加载”。
-
display: none会让 Safari 和多数 Android WebView 直接跳过该img元素，即使后来display改成block，也不会重新触发加载 -
opacity: 0或visibility: hidden不影响懒加载触发，但如果 JS 因断网没执行，CSS 动画也不会启动，用户看到的就是黑块或空白 - 没设
width/height或aspect-ratio，会导致布局抖动（layout shift），用户感知就是“卡了一下”，这不是网络慢，是渲染阻塞
真正健壮的降级，是把所有失败路径都提前堵死：格式、网络、JS、CSS、尺寸，每个环节都留一条退路。最危险的不是某张图没加载出来，而是你根本没意识到它本不该失败。
