必须同时维护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></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/%24%7Bid%7D.webp"> —— 浏览器会字面量请求这个字符串，404

最常被忽略的点：降级不是“让 JS 更健壮”，而是让 HTML 本身具备最小可用性。只要 src 始终有效、data-src 静态存在、关键图不懒加载，哪怕整个 JS bundle 加载失败，页面依然能看。其他所有优化，都建立在这个前提之上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！