前端图片懒加载实战：用 IntersectionObserver 降低首屏压力

图片是前端页面里最常见的性能压力来源。一个商品列表、文章列表、相册页面，如果首屏刚打开就把所有图片一起请求，网络会被图片占满，关键内容也会被拖慢。

图片懒加载的目标不是“图片越晚加载越好”，而是让首屏先稳定渲染，用户快要看到某张图片时再加载它。本文用 IntersectionObserver 实现一个可直接复用的懒加载方案。

摘要

图片懒加载可以分成四步：先给图片保留布局空间，避免页面抖动；再观察图片是否接近视口；进入视口后把 data-src 替换为真实 src；加载完成后停止观察并更新状态。这样能减少首屏并发请求，提高页面可见速度。

适合人群

适合正在做列表页、内容页、商品页、图片墙的前端开发者。你只需要了解基本 HTML、CSS 和 JavaScript DOM 操作，就能跟着示例落地。

目录

• 为什么图片会拖慢首屏
• HTML 和 CSS 先做好占位
• 用 IntersectionObserver 触发加载
• 加载失败、浏览器兼容和排查点
• 上线前检查清单

一、为什么图片会拖慢首屏

页面打开时，浏览器需要下载 HTML、CSS、JavaScript、字体和图片。如果列表里有几十张图片，它们很容易一起排队请求。即使浏览器会做优先级调度，过多图片仍然会占用网络和解码资源，让用户看到可用页面的时间变长。

上图的链路很典型：首屏开始请求，列表图片一起排队，渲染被图片下载和解码拖慢，用户看到的是等待状态。懒加载要解决的就是“非首屏图片过早请求”的问题。

二、HTML 和 CSS 先做好占位

懒加载不是简单把 src 删掉。图片还没加载时，页面也要知道它大概占多大空间，否则图片加载完成后会把内容往下挤，造成布局抖动。

  
蓝色机械键盘

配套 CSS 可以固定比例，让占位更稳定：

.product-card {
  max-width: 480px;
}

.lazy-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #f3f5f7;
  border-radius: 8px;
}

.lazy-image.is-loaded {
  background: transparent;
}

src 放占位图，data-src 放真实图片地址。这样图片在未进入视口时不会加载真实大图，同时页面布局不会突然跳动。

三、用 IntersectionObserver 触发加载

IntersectionObserver 可以观察元素是否进入视口附近。相比滚动事件，它不用每次滚动都手动计算位置，代码更简洁。

这张图对应完整流程：先用占位保留空间，图片接近视口时触发观察回调，把真实地址写入 src，图片加载完成后打上状态并停止观察。

function loadImage(img) {
  const realSrc = img.dataset.src;

  if (!realSrc || img.classList.contains('is-loaded')) {
    return;
  }

  img.src = realSrc;

  img.addEventListener('load', () => {
    img.classList.add('is-loaded');
    img.removeAttribute('data-src');
  }, { once: true });
}

function setupLazyImages() {
  const images = document.querySelectorAll('img.lazy-image[data-src]');

  if (!('IntersectionObserver' in window)) {
    images.forEach(loadImage);
    return;
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) {
        return;
      }

      const img = entry.target;
      loadImage(img);
      observer.unobserve(img);
    });
  }, {
    root: null,
    rootMargin: '200px 0px',
    threshold: 0.01,
  });

  images.forEach((img) => observer.observe(img));
}

document.addEventListener('DOMContentLoaded', setupLazyImages);

rootMargin: '200px 0px' 表示图片距离视口还有 200px 时就提前加载，避免用户滚到图片位置时才开始请求。这个值可以按网络情况和图片大小调整。

四、加载失败和兜底处理

线上图片可能会 404、超时或被裁剪服务拒绝。建议监听 error，把失败图片替换成统一兜底图，避免页面留下破图。

function bindImageErrorFallback(img) {
  img.addEventListener('error', () => {
    img.src = '/static/img/image-error.webp';
    img.classList.add('is-error');
  }, { once: true });
}

document.querySelectorAll('img.lazy-image').forEach(bindImageErrorFallback);

如果项目里已有图片组件，可以把加载、失败、状态类名都收敛在组件内部，业务页面只传真实地址和描述文本。

五、浏览器原生 lazy 是否够用

现代浏览器支持 loading="lazy"，简单页面可以直接使用：

如果只是普通文章页，原生 lazy 通常够用。如果你需要更精细的提前距离、加载状态、埋点、骨架图、失败重试，IntersectionObserver 会更灵活。

常见问题

1. 为什么懒加载后图片还是导致页面抖动？

通常是没有给图片设置宽高或固定比例。建议写上 width、height，或者用 CSS 的 aspect-ratio 保留空间。

2. rootMargin 应该设置多少？

列表页可以从 200px 到 400px 试起。图片大、网络慢时可以适当增大；如果希望更省流量，可以减小。

3. 首屏图片也要懒加载吗？

不建议。首屏关键图片应该直接加载，甚至可以考虑提高优先级。懒加载主要用于首屏下方、用户暂时看不到的图片。

上线前检查清单

• 首屏关键图片是否直接加载，非首屏图片是否延迟加载。
• 图片是否设置尺寸或比例，避免布局抖动。
• rootMargin 是否能让图片在滚动到位前加载好。
• 失败图片是否有兜底图。
• 是否用 Network 面板确认非首屏图片没有在初始阶段全部请求。

总结

图片懒加载的核心是控制时机：首屏先稳住，非首屏图片接近视口再加载。用 IntersectionObserver 可以把这个流程写得很清楚：占位布局、进入视口、替换地址、加载完成。配合固定比例、失败兜底和 Network 检查，就能把列表页的首屏压力降下来。