loading="lazy"降级失败的根本原因是未提供fallback路径，导致浏览器不支持时src为空或无效而白屏；必须同时维护src（指向可用占位图）和data-src（静态高清图地址），并内联intersectionobserver初始化代码、对关键图片跳过懒加载、避免display:none等css陷阱。
loading="lazy" 降级失败的典型表现
页面加载后大量图片白屏、控制台报 Failed to load resource、首屏图片延迟出现甚至不出现——这些都不是“懒加载没生效”，而是降级逻辑被绕过或缺失。根本原因在于：只加了 loading="lazy"，却没准备 fallback 路径。浏览器不支持时，它不会报错，也不会自动 fallback 到 data-src；它只是当这个属性不存在，直接按默认行为（立即加载）处理，但此时 src 可能是占位图或空值，结果就是白屏。
必须同时维护两套 src 状态
真正可靠的降级不是“有就用，没有就不管”，而是让 DOM 始终处于可运行状态：
-
src必须始终指向一个可用资源：可以是低质量占位图（如 1px GIF）、LQIP 模糊图，或 SSR 渲染出的真实小图；绝不能留空或写无效路径 -
data-src存真实高清图地址，且必须在 HTML 中静态存在（不能靠 JS 动态注入），否则断网时 JS 加载失败，data-src根本不存在 - 服务端渲染（SSR）需确保首屏图片的
src是真实可访问地址，而非仅依赖客户端 JS 补充——否则断网时首屏直接空白
IntersectionObserver 初始化前的断网保护
JS 文件本身可能加载失败，尤其在弱网或拦截器环境下。如果懒加载逻辑全靠 JS，那 JS 加载失败 = 全部图片不加载。应对方式很实在：
- 把核心 observer 初始化代码内联进
<script></script>标签，避免外部请求失败导致逻辑丢失 - 用
if ('IntersectionObserver' in window)做存在性检测，但不要只做检测——检测失败时，立刻遍历所有img[data-src]并赋值src，保证图片至少能加载 - 对关键区域（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src；降级方案不该牺牲首屏确定性
断网时最容易被忽略的 CSS 陷阱
很多团队花力气优化 JS 降级，却忘了样式层也能让懒加载“失效”：
- 用
display: none隐藏图片容器？loading="lazy"在 Safari 和多数 Android WebView 中会直接跳过该元素，即使后来display改成block，也不会重新触发加载 - 用
opacity: 0或visibility: hidden配合 transition 做淡入？没问题，这些不影响懒加载触发，但要注意：如果 JS 因断网没执行，CSS 动画也不会启动，用户看到的就是黑块或空白 - 没设宽高或
aspect-ratio？断网时 JS 不执行，占位图又没尺寸约束，图片加载后撑开布局，造成不可逆的 CLS（累计布局偏移）——这不是性能问题，是体验崩塌
降级的本质不是“多写几行备用代码”，而是承认网络不可靠、JS 可能缺席、浏览器能力参差不齐。每个 img 标签都得自己扛住最差情况，而不是指望某段 JS 来救场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
