loading="lazy"单独使用会白屏，因其无降级能力：浏览器不支持时忽略该属性，若src为空、无效或仅依赖JS补全，则断网或JS失败时图片无资源可加载。
只加 loading="lazy" 不等于降级加载，它本身不提供 fallback 能力；真正能断网可用、JS 失败也不白屏的降级方案，必须靠 src 和 data-src 的双状态协同 + 内联 JS 初始化逻辑。
为什么 loading="lazy" 单独使用会白屏
浏览器不支持 loading="lazy"（如旧版 Safari、IE、部分拦截插件环境）时，该属性被完全忽略——但此时若 src 是空值、占位图路径错误或压根没写，图片就永远不加载。这不是“懒加载失效”，而是 DOM 缺少可运行的最小资源入口。
- 典型错误：只写
<img loading="lazy">，src留空或写成src="#" - 后果：断网时 JS 加载失败 →
data-src无法读取 → 图片无地址可加载 → 白屏 - 正确做法：
src必须指向一个确定可用的资源（如 1px GIF、LQIP 图、SSR 渲染出的小图），data-src存高清图地址且静态存在于 HTML 中
如何用 IntersectionObserver 做可靠降级
原生 loading="lazy" 无法控制提前量、不兼容低版本、不处理加载失败；用 IntersectionObserver 手动实现，才能把降级逻辑真正握在手里。
- 初始化必须内联：
<script>if ('IntersectionObserver' in window) { /* observer 创建代码 */ } else { document.querySelectorAll('img[data-src]').forEach(i => i.src = i.dataset.src); }</script> -
rootMargin: '100px'提前加载，防滚动过快导致闪白；但不要设过大（如'500px'），否则失去懒加载意义 - 加载后立刻调用
observer.unobserve(img)，避免重复触发；同时建议加data-loaded="true"防多轮执行 - 绑定
onerror：比如img.onerror = () => img.src = '/placeholder.svg'，应对 404 或网络中断
哪些 CSS 会让懒加载直接失效
很多团队花力气写 JS 降级，却因一行 CSS 让整个机制归零。这些样式在断网或 JS 未执行时依然生效，且浏览器不会报错。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
display: none在 Safari 和多数 Android WebView 中会导致IntersectionObserver完全跳过该元素，即使之后display改为block，也不会重新触发观察 -
overflow: hidden包裹容器时，若图片初始位置超出裁剪区，部分浏览器（尤其是 iOS）会判定其“不可见”，拒绝触发懒加载 - 没设宽高或
aspect-ratio：布局未预留空间 → 图片加载后强制重排 → 视觉跳动，用户感知为“加载失败” - 正确替代：
opacity: 0或visibility: hidden不影响懒加载触发，但需确保 JS 失效时有兜底显示逻辑
首屏关键图必须绕过懒加载
商品主图、Banner、文章头图这类 LCP 元素，加 loading="lazy" 是自我伤害——它会阻止 HTML 预加载扫描器（preload scanner）在解析阶段就发起请求，硬生生把首屏最大内容绘制时间往后推。
- 正确做法：首屏图片直接写死
src，不加loading属性，也不设data-src - 服务端渲染（SSR）时，确保首屏
src是真实可访问地址，而非依赖客户端 JS 补充 - 动态列表中，“前 N 项”是否加 lazy 取决于首屏高度估算，不是固定写死数字；例如移动端首屏大概率只容得下 2–3 张图，那就只对第 4 张起加
loading="lazy"
最易被忽略的点是：降级不是“JS 挂了再补救”，而是让 HTML 本身在任何执行环境下都具备最低限度的可展示性——src 是否始终有效、data-src 是否静态存在、CSS 是否暗中屏蔽了观察目标，这三件事比写多少行 JS 都关键。
