当前位置：首页 > 文章列表 > 文章 > 前端 > 前端图片懒加载实战：用 IntersectionObserver 降低首屏压力

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

来源：17golang原创 2026-06-13 09:11:44 0浏览收藏

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

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

摘要

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

适合人群

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

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

页面打开时，浏览器需要下载 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);

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