loading="lazy"断网白屏的根本原因是src为空或无效，降级必须确保src始终指向可访问资源（如1px GIF），data-src需静态存在，关键图禁用懒加载，IntersectionObserver需内联并fallback，CSS隐藏或布局问题也会导致失效。
只加 loading="lazy" 但没配降级路径，断网或旧浏览器下图片直接白屏——这不是“懒加载失效”，而是根本没给浏览器留活路。
为什么 loading="lazy" 一断网就白屏
浏览器不支持 loading="lazy" 时，它不会报错，也不会自动读取 data-src；它只是当这个属性不存在，然后按默认逻辑加载 src。如果 src 是空、src="placeholder.svg" 但该文件又没部署，或者 SSR 渲染时 src 被清空了，结果就是控制台报 Failed to load resource，页面大片空白。
真正可靠的降级不是“有就用，没有就算”，而是让 DOM 始终处于可运行状态：
-
src必须始终指向一个真实可访问的资源：1px GIF、LQIP 模糊图，或 SSR 渲染出的小图；绝不能是空值或无效路径 -
data-src存高清图地址，且必须在 HTML 中静态存在（不能靠 JS 动态写入），否则断网时 JS 加载失败，data-src根本不存在 - 首屏关键图（如商品主图、头图）应跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
IntersectionObserver 初始化前的断网兜底怎么写
JS 文件本身可能加载失败，尤其在弱网、广告拦截器或企业内网环境下。如果懒加载全靠外部 JS，那 JS 失败 = 全部图片不加载。
立即学习“前端免费学习笔记（深入）”；
必须把核心初始化代码内联进 HTML，且做存在性检测 + 立即 fallback：
- 用
<script>内联 Observer 初始化代码，避免额外请求失败 - 检测
'IntersectionObserver' in window后，不要只return；检测失败时，立刻遍历所有img[data-src]并赋值img.src = img.dataset.src - 对已加载过的图片加
data-loaded="true"标记，避免重复触发
示例片段（内联在 <head> 或 <body> 底部）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<script>
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(...);
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
} else {
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
img.removeAttribute('data-src');
});
}
</script>
哪些 CSS 会让 lazy 加载彻底失效
很多团队花力气写 JS 降级，却忘了样式层也能让懒加载“静默失效”：
-
display: none的容器里放img[loading="lazy"]？Safari 和多数 Android WebView 会直接跳过该元素，即使后来display改成block，也不会重新触发加载 -
opacity: 0或visibility: hidden没问题，不影响触发，但要注意：JS 断网没执行，CSS 动画也不会启动，用户看到的就是黑块或空白 - 父容器
overflow: hidden且子元素位置偏移较大时，部分浏览器会误判交集区域，导致isIntersecting始终为false
更隐蔽的问题：没设宽高或 aspect-ratio，图片加载后重排布局，视觉上像“突然闪现”，其实不是加载慢，是浏览器没预留空间。
srcset + sizes 不配对等于白写
只写 srcset 不配 sizes，浏览器不知道当前容器多宽，只能瞎猜——大概率拉取桌面尺寸大图，移动端流量照烧。
典型安全写法：
-
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，对应不同断点下的实际展示宽度 -
srcset中的宽度描述符（如400w）必须和原图真实宽度一致，否则<picture>切换逻辑会错乱 - 现代格式降级必须用
<picture>+<source>结构，最后的<img>是唯一有效的兜底，src只能出现在这里
错误示范：<source src="photo.avif"> —— src 在 <source> 上无效，浏览器直接忽略。
最常被忽略的一点：降级不是“兼容旧浏览器”，而是保障“JS 加载失败”“网络中断”“渲染中途崩溃”这些真实故障场景下，用户仍能看到内容。它考验的是 HTML 结构的鲁棒性，而不是 JS 逻辑的精巧度。
