图片降级后页面留白的根源是img的src指向无效路径或被CSS隐藏，导致占位却不渲染；必须确保src始终指向可加载的真实资源，如1px GIF或LQIP图，且关键图应禁用懒加载。
为什么图片降级后页面会留白
留白不是因为图片没加载出来，而是浏览器按原生规则渲染时，img 元素仍存在、但 src 指向了无效路径（如空字符串、"#"、404 占位图）、或被 CSS 隐藏（如 display: none），导致它占位却不渲染内容。尤其在断网、JS 失败、旧浏览器下，loading="lazy" 或 data-src 完全不生效，只看 src —— 这个值一旦不可用，就是一块透明空格。
确保 src 始终指向一个真实可加载资源
这是防白屏的底线。不要把 src 当成“临时占位”，它必须能发出请求且返回 200 响应。
-
src应指向一个 CDN 托管的 1px GIF、LQIP 模糊图，或 SSR 渲染出的真实小图；绝不能是""、"#"、"about:blank"或本地不存在的路径 - 若用
<picture>，其中<img>的src同样要满足上述要求——它不是“备用”，而是最终 fallback 载体 - 服务端需校验首屏图片的
src地址是否可访问，不能依赖客户端 JS 补充
避免 display: none 触发懒加载跳过
Safari 和多数 Android WebView 对 loading="lazy" 的实现是：元素处于 display: none 状态时，直接跳过监听，即使后续 JS 把它改成 block，也不会重新触发加载。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 改用
opacity: 0或visibility: hidden配合淡入动画，不影响懒加载触发时机 - 若必须隐藏容器，优先用
height: 0; overflow: hidden+padding-bottom维持 aspect-ratio - 对关键图（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
JS 失效时必须有内联兜底逻辑
外部 JS 文件加载失败，整个懒加载就归零。不能把降级希望全押在 JS 上。
立即学习“前端免费学习笔记（深入）”；
- 将
IntersectionObserver初始化代码内联进<script>标签，不发额外请求 - 用
if ('IntersectionObserver' in window)检测，但检测失败时立刻执行：document.querySelectorAll('img[data-src]').forEach(i => i.src = i.dataset.src) -
data-src必须静态写在 HTML 中（不能靠 JS 注入），否则断网时根本不存在
最易被忽略的点：留白常不是 JS 或 HTML 层的问题，而是 src 路径本身在弱网下超时、CDN 回源失败、或服务端未根据 Save-Data 头返回轻量图，导致请求卡住——此时元素仍在，但无内容、无错误、无重试，就静静留着白缝。
