最简单方案是使用原生 loading="lazy"，仅对 <img> 和 <iframe> 有效，需显式声明，首屏关键图应设为 eager；兼容老浏览器可用 Intersection Observer；务必配合 srcset/sizes 实现响应式懒加载；SSR 下需预设宽高防布局偏移。
图片延迟加载用 loading="lazy" 最简单
现代浏览器原生支持的 loading="lazy" 是最轻量、最安全的方案，不需要 JS、不破坏语义、兼容性已覆盖 Chrome 76+、Firefox 75+、Safari 15.4+。它只对 <img> 和 <iframe> 生效，且仅在滚动进入视口前延迟加载。
常见错误是把它加到所有图片上却忽略关键限制：它对 background-image 无效，对通过 CSS 或 JS 动态插入的图片也无效；另外，loading="eager" 才是默认行为，显式写 loading="lazy" 才起作用。
- 必须写在
<img>标签里：<img src="photo.jpg" loading="lazy" alt="..."> - 不要和 JS 懒加载库混用，否则可能重复触发或冲突
- 首屏关键图片建议保持
loading="eager"（或直接不写），避免白屏 - Safari 对
loading="lazy"在<picture>内部的支持稍晚，稳妥起见可将loading放在最外层<img>上
需要兼容老浏览器？用 Intersection Observer 手动监听
当必须支持 IE 或旧版 Safari 时，Intersection Observer 是比轮询 getBoundingClientRect() 更高效、更稳定的选择。它由浏览器原生调度，不会阻塞主线程，且能精确控制阈值和根边界。
容易踩的坑是忘记调用 observer.unobserve() —— 图片加载完成后若不取消监听，会持续占用内存和计算资源；另一个问题是误把 rootMargin 设成负值导致过早触发，比如 "-100px" 可能让图片在完全进入视口前就加载。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 初始化时传入
{ root: null, threshold: 0.01 }即可满足多数场景 - 每个
<img>的src应先存于data-src，加载后再移入src并清除data-src - 务必在回调中检查
isIntersecting，否则滚动停顿后可能重复执行 - 对低性能设备，可降级为
threshold: 0+rootMargin: "200px"提前加载
srcset 和 sizes 必须和懒加载配合使用
单独加 loading="lazy" 不解决响应式图片的带宽浪费问题。如果只写一个 src，浏览器仍会按设备像素比下载远超需要的尺寸；而正确使用 srcset 和 sizes 后，懒加载才真正“聪明”——浏览器只请求当前视口宽度匹配的那张图。
典型错误是 sizes 值写死，比如 sizes="100vw"，但实际图片只占页面一半宽度，结果下错大图；或者 srcset 里漏掉 DPR=2 的版本，导致 Retina 屏模糊。
-
sizes应反映真实布局宽度，例如：sizes="(max-width: 768px) 100vw, 50vw" -
srcset中每个候选图需标注宽度，如："small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" - 懒加载生效时，浏览器仍会根据
sizes和视口计算出最优源，这点和非懒加载一致 - 不要用 JS 动态改
srcset后再触发懒加载——Intersection Observer不会自动重检测，得手动observe()一次
服务端渲染（SSR）环境下图片懒加载要防闪烁
Next.js、Nuxt 等框架在服务端生成 HTML 时，若直接输出 loading="lazy"，客户端 Hydration 后可能因 JS 补充逻辑（如占位图、宽高比盒子）引发 layout shift 或短暂空白。核心矛盾在于：服务端无法判断是否在视口内，而客户端 JS 加载又存在延迟。
最容易被忽略的是未设置 width 和 height 属性。没有这些，浏览器无法预留空间，图片加载瞬间会推挤下方内容，尤其在慢网下更明显。
- 强制为
<img>添加width和height（即使单位是px，也可用 CSS 覆盖） - 服务端保留
loading="lazy"，但客户端首次渲染时用useEffect/onMounted做一次img.naturalWidth === 0判断，补占位 SVG 或背景色 - 避免在 SSR 中用 JS 检测
IntersectionObserver是否可用——服务端永远返回undefined，应交由客户端运行时决定是否启用 - Next.js 用户优先用
next/image，它默认集成懒加载、响应式和占位逻辑，比手写更稳
