只写 loading="lazy" 会白屏，因不支持该属性的浏览器忽略它，而 src 为空或无效时图片无法加载；必须用 src（指向真实资源）+ data-src（高清图地址）双状态管理，并内联兜底脚本。
loading="lazy" 单独用不构成降级，必须搭配 src 和 data-src 的双状态管理，否则断网或旧浏览器下大概率白屏。
为什么只写 loading="lazy" 就会白屏
浏览器不支持该属性时，它直接被忽略——但此时若 src 是空值、占位图路径错误，或压根没设 src，图片就彻底不加载。这不是“懒加载没触发”，而是 DOM 里根本没可用资源。
-
src必须始终指向一个真实可访问的资源：比如 1px GIF、LQIP 模糊图，或 SSR 渲染出的小图；不能是空字符串或/assets/real.jpg这类依赖 JS 运行时解析的路径 -
data-src存高清图地址，且必须在 HTML 源码中静态存在（不能靠 JS 动态setAttribute注入），否则断网时 JS 加载失败，data-src根本不存在 - 服务端渲染需确保首屏图片的
src是真实 URL，而非留空等客户端补全
JS 失败时如何兜底加载真实图片
懒加载逻辑若全靠外部 JS，那 JS 加载失败 = 所有图片都不出现。必须把兜底逻辑前置到 HTML 内联脚本中。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把核心
IntersectionObserver初始化代码内联进<script></script>，避免因网络问题导致整个逻辑丢失 - 用
if ('IntersectionObserver' in window)检测，但检测失败后必须立刻执行兜底：document.querySelectorAll('img[data-src]').forEach(img => img.src = img.dataset.src) - 对关键图片（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
容易被忽略的 CSS 陷阱
样式层也能让懒加载“静默失效”，且 JS 断网时无法修复。
-
display: none的容器内图片，在 Safari 和多数 Android WebView 中会被loading="lazy"直接跳过；即使后来display改为block，也不会重新触发加载 -
opacity: 0或visibility: hidden不影响懒加载触发，但若 JS 没执行，CSS 动画不会启动，用户看到的就是空白或黑块 - 没设宽高或
aspect-ratio会导致布局偏移，尤其在兜底加载时更明显——建议所有img都带width/height或内联style="aspect-ratio: 4/3;"
最危险的不是懒加载没生效，而是你根本没意识到它已经失效——因为页面没报错、DOM 看似完整，但用户看到的是大片空白。真正的降级，是从 HTML 初始状态就确保每个 img 至少能加载出点东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
