必须同时维护src（指向可用占位图）和data-src（静态高清图地址），内联IntersectionObserver初始化代码，关键图片跳过懒加载，避免display:none等CSS陷阱。
动态图片无法“降级”为静态图片——它本身就是静态资源，只是加载时机或呈现方式被动态控制。真正要解决的，是当 JS 失效、网络中断或浏览器不支持时，图片仍能正常显示。
loading="lazy" 不生效导致白屏？必须配 data-src + 可用 src
浏览器不支持 loading="lazy" 时，它会直接忽略该属性，但不会自动把 data-src 赋给 src。如果此时 src 是空、占位图路径错误，或压根没写，结果就是白屏。
-
src必须始终指向一个真实可访问的资源：比如 1×1 的透明 GIF（data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==），或 SSR 渲染出的低质量图 -
data-src存高清图地址，且必须在 HTML 源码中静态存在（不能靠 JS 拼接或异步注入） - 关键图片（如商品主图、头图）建议跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
JS 失败时 IntersectionObserver 不运行？内联初始化 + fallback 补救
如果懒加载逻辑全靠外部 JS 文件，而该文件因断网、CDN 故障或广告拦截器被阻断，整个图片加载链就断了。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把核心初始化代码内联进
<script>标签（不要src引入），确保首屏 HTML 解析完就能执行 - 用
if ('IntersectionObserver' in window)检测，但检测失败时必须立刻遍历所有img[data-src]并赋值src = img.dataset.src - 避免在 CSS 中对懒加载图片使用
display: none或visibility: hidden—— 这会让 IntersectionObserver 无法触发，且断网时 JS 不执行，图片永远不可见
动态生成的图片 URL 怎么保证离线可用？new Image() 不是降级手段
link rel="preload" 对动态图片完全无效；new Image() 是预加载手段，不是降级方案。它解决的是“提前拉取”，不是“JS 失效后还能不能显示”。
立即学习“前端免费学习笔记（深入）”；
- 所有图片路径必须能在服务端渲染阶段确定，尤其是首屏图片：SSR 输出的 HTML 中，
src就得是真实可访问地址 - WebP 等格式探测必须在服务端做（通过 User-Agent 或 Accept 头），不能靠客户端 JS 异步判断后替换
src，否则断网时无回退路径 - 不要在模板里写
<link rel="preload" href="/img/${id}.webp">—— 浏览器会字面量请求这个字符串，404
最常被忽略的点：降级不是“让 JS 更健壮”，而是让 HTML 本身具备最小可用性。只要 src 始终有效、data-src 静态存在、关键图不懒加载，哪怕整个 JS bundle 加载失败，页面依然能看。其他所有优化，都建立在这个前提之上。
