loading="lazy"仅控制加载时机，不提供占位功能，未加载时会留白塌陷、引发FOUC；需配合data-src+占位图+宽高属性+IntersectionObserver实现稳定懒加载与占位。

为什么 loading="lazy" 不能直接当占位用

浏览器原生的 loading="lazy" 只控制加载时机，不提供占位行为——图片没加载时会留白、塌陷布局，甚至触发 FOUC。它不是占位方案，而是加载策略。真要“懒加载+占位”，得自己管高度/背景/过渡。

用 data-src + CSS 占位最稳

主流做法是把真实地址存在 data-src，用 src 放一个极小的 base64 占位图（或纯色背景），再靠 JS 触发加载。关键点在：保持宽高比、避免重排、防重复加载。

• 给 <img alt="如何通过HTML实现简单的图片懒加载占位" > 加 width 和 height 属性（或 CSS aspect-ratio），否则懒加载后尺寸突变
• 占位图推荐 1×1 的 base64：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==，体积小、无渲染开销
• JS 判断进入视口后，把 data-src 赋给 src，再移除 data-src 防二次触发
• 加 fade-in 过渡更友好：opacity: 0; transition: opacity .3s; &[src] { opacity: 1; }

IntersectionObserver 比 scroll 事件更靠谱

监听 scroll 容易卡顿、漏触发；IntersectionObserver 是浏览器原生异步回调，性能好、兼容性够（Chrome 51+/Firefox 55+）。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 初始化时只观察 img[data-src]，不查全部 img
• 设 rootMargin: '50px' 提前加载，避免滚动过快时白屏
• 观察到后立即 unobserve()，避免反复回调
• 降级方案：如果 IntersectionObserver 不存在，fallback 到 getBoundingClientRect() 简单判断

别忽略 srcset 和 sizes 的懒加载适配

响应式图片里 srcset 和 sizes 必须和 src 一起迁移，否则高 DPR 设备可能加载错尺寸。

立即学习“前端免费学习笔记（深入）”；

• 把 data-srcset 和 data-sizes 一并存上，加载时同步赋值
• 注意 Safari 对空 srcset 的处理：赋值前确保 srcset 是空字符串或有效值，别留 srcset=""
• 如果用了 <picture></picture>，懒加载逻辑要升级到 <source></source> 标签，逐个替换 data-srcset

实际最易出问题的是宽高丢失和 srcset 同步遗漏——这两处一错，懒加载就变成布局抖动加载。