图片懒加载的核心是视口进入时才加载，推荐用Intersection Observer API实现，兼容方案用getBoundingClientRect+节流，需结合loading="lazy"、解码优化、占位图及服务器压缩缓存，并避免首屏关键图懒加载。
图片懒加载的核心是让页面只在图片即将进入视口时才开始加载，避免一次性请求大量图片资源，从而减少初始请求量、降低带宽占用、加快首屏渲染速度。
使用 Intersection Observer API（推荐）
现代浏览器普遍支持 Intersection Observer，它能高效监听元素是否进入可视区域，无需频繁监听 scroll 或 resize 事件，性能好、代码简洁。
- 创建观察器实例，配置
rootMargin（如"0px 0px 200px 0px"表示提前 200px 开始加载） - 为每个
<img>设置data-src存放真实地址，src可留空或指向占位图 - 观察器回调中，当
isIntersecting为 true 时，将data-src赋值给src，并调用unobserve()停止监听
兼容老浏览器的 fallback 方案（getBoundingClientRect）
对于不支持 Intersection Observer 的环境（如 IE），可用定时检测 + getBoundingClientRect() 判断位置，但需注意性能：
- 用
requestIdleCallback或节流（throttle）控制检测频率，避免阻塞主线程 - 判断
rect.top <= window.innerHeight && rect.bottom >= 0即视为进入视口 - 加载完成后移除监听逻辑，防止重复执行
配合 HTML 和加载体验优化
懒加载不是孤立功能，需结合其他手段才能真正提升感知速度：
立即学习“Java免费学习笔记（深入）”；
- 为
<img>添加loading="lazy"属性（原生懒加载，对大部分图片生效，但兼容性和控制粒度不如 JS 方案） - 使用
decoding="async"让图片解码不阻塞渲染 - 搭配低质量占位图（LQIP）或骨架屏，避免空白闪烁
- 确保服务器开启压缩（WebP/AVIF）、启用缓存头（
Cache-Control），让已加载图片复用更高效
避免常见陷阱
懒加载若使用不当，反而影响体验或 SEO：
- 不要对首屏关键图片（如 banner、logo）懒加载，应立即加载
- 服务端渲染（SSR）时，需区分首屏与非首屏：首屏图片应直出
src，其余用data-src - 图片加载失败时提供备用逻辑（如显示错误占位图、重试机制）
- SPA 中路由切换后，新内容里的图片需重新初始化观察器
