JavaScript如何实现图片懒加载_怎样提升页面加载速度

图片懒加载的核心是视口进入时才加载，推荐用Intersection Observer API实现，兼容方案用getBoundingClientRect+节流，需结合loading="lazy"、解码优化、占位图及服务器压缩缓存，并避免首屏关键图懒加载。

图片懒加载的核心是让页面只在图片即将进入视口时才开始加载，避免一次性请求大量图片资源，从而减少初始请求量、降低带宽占用、加快首屏渲染速度。

使用 Intersection Observer API（推荐）

现代浏览器普遍支持 Intersection Observer，它能高效监听元素是否进入可视区域，无需频繁监听 scroll 或 resize 事件，性能好、代码简洁。

• 创建观察器实例，配置 rootMargin（如 "0px 0px 200px 0px" 表示提前 200px 开始加载）
• 为每个 设置 data-src 存放真实地址，src 可留空或指向占位图
• 观察器回调中，当 isIntersecting 为 true 时，将 data-src 赋值给 src，并调用 unobserve() 停止监听

兼容老浏览器的 fallback 方案（getBoundingClientRect）

对于不支持 Intersection Observer 的环境（如 IE），可用定时检测 + getBoundingClientRect() 判断位置，但需注意性能：

• 用 requestIdleCallback 或节流（throttle）控制检测频率，避免阻塞主线程
• 判断 rect.top = 0 即视为进入视口
• 加载完成后移除监听逻辑，防止重复执行

配合 HTML 和加载体验优化

懒加载不是孤立功能，需结合其他手段才能真正提升感知速度：

• 为 添加 loading="lazy" 属性（原生懒加载，对大部分图片生效，但兼容性和控制粒度不如 JS 方案）
• 使用 decoding="async" 让图片解码不阻塞渲染
• 搭配低质量占位图（LQIP）或骨架屏，避免空白闪烁
• 确保服务器开启压缩（WebP/AVIF）、启用缓存头（Cache-Control），让已加载图片复用更高效

避免常见陷阱

懒加载若使用不当，反而影响体验或 SEO：

• 不要对首屏关键图片（如 banner、logo）懒加载，应立即加载
• 服务端渲染（SSR）时，需区分首屏与非首屏：首屏图片应直出 src，其余用 data-src
• 图片加载失败时提供备用逻辑（如显示错误占位图、重试机制）
• SPA 中路由切换后，新内容里的图片需重新初始化观察器