React 图片渐进式渲染：从“加载中”到“哇塞”的优雅进化

大家好，我是你们的老朋友，一个在代码堆里摸爬滚打多年的 React 资深工程师。

今天咱们不聊那些虚头巴脑的架构图，也不讲什么晦涩难懂的源码分析，咱们来聊点实实在在、能直接提升用户体验（UX）的“干货”。咱们要聊的是：图片加载。

你有没有过这种经历？打开一个电商网站，手指在屏幕上疯狂滑动，结果图片像是在跟你玩“捉迷藏”，一会儿白屏，一会儿一个模糊的小圆圈，好不容易那个圆圈变清晰了，你的手指已经滑到下一张图了。这种体验，就像是你点了一盘满汉全席，结果上来的全是冷饭。

今天，我们就来彻底解决这个痛点。我们将打造一个组件，它能让图片在进入视口之前，先给你展示一个“素描版”（模糊图），一旦图片加载完毕，瞬间“高清重制”（清晰图）。这就是渐进式渲染。

而这一切的幕后英雄，就是我们今天要重点介绍的主角——Intersection Observer API。

准备好了吗？系好安全带，咱们开始这段从“模糊”到“清晰”的技术旅程。

---

第一部分：图片加载的“原罪”与“救赎”

在深入代码之前，咱们先得搞清楚，为什么现在的图片加载这么让人头疼？

1. 那个让人抓狂的“白屏”与“抖动”

传统的图片加载方式是什么？就是 <img src="huge-photo.jpg" />。

浏览器拿到这个指令后，会去服务器要这个巨大的图片文件。如果图片有 5MB，那好，你的网络传输就需要几秒钟。在这几秒钟里，用户看到的是什么？是空白！或者是一个正在转圈的 Loading 图标。

更糟糕的是，当你手指滑动，图片还没加载完，浏览器突然把它画出来了，图片加载完了，浏览器又把它画了一次。这叫“布局抖动”，用户体验极差。

2. 性能杀手：主线程阻塞

你可能会说：“我加个 Loading 图不就行了？”

兄弟，你那是给用户看，不是给浏览器看的。当浏览器在解析 HTML、渲染页面、执行 JavaScript 的时候，如果图片加载这个大任务一直挂在那里，就会阻塞主线程。这就好比你在炒菜（主线程），突然有人让你去搬一整箱砖头（加载图片），你的锅里的菜怎么办？糊了！

3. 流量浪费

对于长列表或者瀑布流页面，用户可能只看中间的一张图，但他为了看这一张图，你可能已经把前面后面几十张图的请求都发出去了。这就是典型的“杀鸡用牛刀”，浪费流量，浪费带宽，服务器看了都想哭。

---

第二部分：Intersection Observer API —— 浏览器的“智能保安”

要解决懒加载，咱们得有个办法知道用户到底有没有看到这张图。以前的做法是监听 scroll 事件，计算 scrollTop + clientHeight 和 scrollHeight。

但是，这种方法有个致命缺点：性能差。scroll 事件触发频率极高，每次触发都要计算坐标，这就像是你每隔几毫秒就要问一次保安：“嘿，有人进来了吗？”保安刚想回答，你下一秒又问了，保安都累吐血了，CPU 负载直接飙升。

于是，上帝（W3C）给了我们一个更聪明的工具——Intersection Observer API。

2.1 什么是 Intersection Observer？

你可以把 IntersectionObserver 想象成一个安静的保安。他不需要你每秒都去问，他只需要站在门口（DOM 节点），默默观察，一旦有人（目标元素）进入他的视线范围，他就给你发个消息。

它的核心思想是：“你进来了吗？进来了！那我再去处理图片加载。”

2.2 为什么它这么快？

它不是用 JavaScript 逐行计算坐标，而是由浏览器底层（C++ 实现）来处理。它利用了浏览器的布局抖动检测机制，非常高效。

---

第三部分：核心逻辑 —— 模糊到清晰的魔法

现在，我们要把这两个技术结合起来：

1. Intersection Observer：负责“何时加载”（懒加载）。
2. 渐进式渲染：负责“如何显示”（先模糊，后清晰）。

为了实现“先模糊后清晰”，我们有两种主要手段：

• 手段 A（简单粗暴）：CSS Filter Blur

  • 原理：给 <img> 标签加一个 filter: blur(10px)。图片加载完，移除 blur。
  • 优点：代码少，逻辑简单。
  • 缺点：模糊计算是 GPU 合成，如果图片很大，可能会稍微卡顿一下。

• 手段 B（专业进阶）：双图切换

  • 原理：准备两张图，一张模糊的，一张清晰的。初始显示模糊的，加载完清晰图后，通过 CSS opacity 切换显示清晰的图。
  • 优点：体验最丝滑，没有模糊计算的过渡。
  • 缺点：需要两张图的资源。

为了体现“资深专家”的水准，我们今天重点实现手段 B，但也会顺带提一下手段 A 的实现。

---

第四部分：代码实战 —— 打造 BlurImage 组件

咱们直接上代码。这是一个基于 React Hooks 的封装组件。

4.1 基础组件实现

首先，我们需要一个组件，它接收 src（清晰图地址）、blurSrc（模糊图地址）等属性。

import React, { useState, useEffect, useRef } from 'react';
import useInView from 'react-intersection-observer';

const ProgressiveImage = ({ src, blurSrc, alt, className, style }) => {
  // 状态管理
  const [isLoaded, setIsLoaded] = useState(false);
  const [isIntersecting, setIsIntersecting] = useState(false);

  // 引入 Intersection Observer
  const { ref, inView } = useInView({
    triggerOnce: true, // 只触发一次，图片加载后就不需要再监听了
    threshold: 0.1,    // 元素进入视口 10% 时触发
    rootMargin: "100px" // 提前 100px 加载，保证用户滑到时已经准备好了
  });

  // 当进入视口时，开始加载图片
  useEffect(() => {
    if (inView) {
      // 1. 先加载模糊图（预览）
      const tempImg = new Image();
      tempImg.src = blurSrc;

      tempImg.onload = () => {
        setIsLoaded(true); // 模糊图加载成功，设置状态
      };
    }
  }, [inView, blurSrc]);

  // 当清晰图加载完成时，我们可以做点什么（比如埋点统计）
  const handleHighResLoad = () => {
    console.log(`High-res image ${src} loaded!`);
  };

  return (
    <div 
      ref={ref} 
      className={`progressive-image-wrapper ${isLoaded ? 'loaded' : ''} ${className}`}
      style={style}
    >
      {/* 
        这里是关键：我们渲染两张图片。
        1. 模糊图：始终存在，opacity: 0.3
        2. 清晰图：初始 opacity: 0，加载完成后 opacity: 1
      */}
      <img 
        src={blurSrc} 
        alt={alt} 
        className="blur-image" 
        style={{ opacity: isLoaded ? 0 : 1 }} 
      />

      <img 
        src={src} 
        alt={alt} 
        className="sharp-image" 
        onLoad={handleHighResLoad}
        style={{ opacity: isLoaded ? 1 : 0 }} 
      />
    </div>
  );
};

export default ProgressiveImage;

4.2 CSS 样式 —— 丝滑的过渡

光有逻辑不够，还得有 CSS 来撑起门面。

/* 图片容器 */
.progressive-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px; /* 固定高度，防止布局抖动 */
  background-color: #f0f0f0; /* 加载前的背景色 */
  overflow: hidden;
  border-radius: 8px;
}

/* 模糊图片 */
.blur-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out; /* 淡入淡出过渡 */
  filter: blur(10px); /* 核心魔法：模糊 */
}

/* 清晰图片 */
.sharp-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

/* 加载完成后的状态类 */
.progressive-image-wrapper.loaded .blur-image {
  opacity: 0;
}

4.3 在你的页面中使用它

import ProgressiveImage from './ProgressiveImage';

const MyGallery = () => {
  // 假设我们有一个图片数组
  const images = [
    { id: 1, src: 'https://example.com/high-res-1.jpg', blur: 'https://example.com/blur-1.jpg' },
    { id: 2, src: 'https://example.com/high-res-2.jpg', blur: 'https://example.com/blur-2.jpg' },
    // ... 更多图片
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
      {images.map(img => (
        <ProgressiveImage 
          key={img.id} 
          src={img.src} 
          blurSrc={img.blur} 
          alt="Gallery Image" 
        />
      ))}
    </div>
  );
};

---

第五部分：深度解析 —— 为什么这样做更高效？

有的同学可能要问了：“老哥，你这代码里用了 new Image()，这算什么黑魔法吗？”

这其实是一个非常重要的性能优化技巧，叫做预加载。

5.1 图片预加载的时机

在我们的代码里，Intersection Observer 监听的是 div，而不是图片。这有一个巨大的好处：

1. 延迟加载：如果用户不看第一张图，我们的代码就根本不会去创建 new Image()，更不会发起 HTTP 请求。这大大节省了初始页面的加载时间。
2. 抢占式加载：我们在 rootMargin: "100px" 里设置了提前 100px 加载。这意味着，当用户手指滑到图片上方 100px 的位置时，图片就开始下载了。当用户真正看到图片的那一瞬间，图片已经下载好了，直接显示，没有等待。

5.2 双图策略的原理

你可能会问：“为什么不用 CSS filter: blur() 呢？”

确实，filter: blur() 也能实现效果，但它的代价是GPU 合成开销。

当你给一张巨大的 4K 图片加 blur(10px) 时，浏览器必须把这个 4K 图片上传到 GPU，进行模糊计算，然后渲染到屏幕上。如果页面有很多张这样的图，GPU 就会满载运行，导致页面滑动卡顿。

而我们用的双图策略：

1. 模糊图通常很小（比如 200×200 像素），处理起来非常快。
2. 清晰图加载完成后，直接覆盖上去。
3. 这两个操作都是像素级操作，对 GPU 压力极小，但视觉效果却是一样的。

这就是“专业”与“业余”的区别。

---

第六部分：高级技巧 —— 资源服务端配合

作为一个资深专家，我不能只告诉你前端怎么写，还得告诉你后端怎么配合。如果前端写完了，后端只给了一张高清大图，那这个组件就废了。

6.1 服务端生成模糊图

通常，我们在上传图片时，服务端会自动生成缩略图。我们可以利用这个机制。

比如，原图是 photo.jpg，我们可以让服务端生成 photo.blur.jpg（通过 Canvas 模糊算法生成）或者 photo.blur.100x100.jpg（生成极小尺寸图）。

最佳实践：

• 尺寸小：模糊图越小的尺寸越好，加载速度越快。
• 格式：模糊图可以使用更高效的 WebP 格式，因为它体积更小。
• URL 参数：很多 CDN（如 Cloudflare, AWS CloudFront, 阿里云 OSS）支持通过 URL 参数动态处理图片。例如 https://cdn.com/image.jpg?blur=10。

如果后端支持动态模糊，那前端代码可以简化很多：

// 假设后端支持 ?blur=10 参数
const ProgressiveImage = ({ src, alt }) => {
  const blurSrc = `${src}?blur=10&width=200&format=webp`; 

  return (
    <ProgressiveImage 
      src={src} 
      blurSrc={blurSrc} 
      alt={alt} 
    />
  );
};

---

第七部分：错误处理与边界情况

代码写得再好，也有挂的时候。网络断了怎么办？图片挂了怎么办？

7.1 加载失败处理

我们需要给 <img> 标签加一个 onError 事件。

const [hasError, setHasError] = useState(false);

const handleLoadError = () => {
  setHasError(true);
  // 可以在这里显示一个默认的占位图，或者重试逻辑
  console.error('Image failed to load');
};

// 在渲染部分
<img 
  src={isLoaded ? src : blurSrc} 
  onError={handleLoadError}
  style={{ 
    opacity: isLoaded ? 1 : 0.5,
    filter: hasError ? 'grayscale(100%)' : 'none'
  }}
/>

7.2 图片尺寸丢失

有时候图片还没加载出来，我们不知道它的宽高。这会导致布局抖动。我们可以给容器设置一个固定的 min-height，或者使用 aspect-ratio CSS 属性。

.progressive-image-wrapper {
  aspect-ratio: 16 / 9; /* 保持 16:9 的比例 */
  min-height: 200px;
}

---

第八部分：性能分析 —— 数据不会撒谎

咱们来做个思想实验。

场景：一个包含 50 张高清图片的长列表。

方案 A（传统懒加载 + CSS Blur）：

• 用户滚动到第 25 张图时，浏览器才去加载。
• 每次滚动都要计算坐标，CPU 占用 5-10%。
• 图片加载时，页面会闪烁一下（CSS blur 过渡）。

方案 B（Intersection Observer + 双图策略）：

• 用户滚动到第 20 张图（提前加载）时，浏览器开始下载模糊图。
• 模糊图下载极快，瞬间显示。
• 用户看到的是一张模糊的小图（心理预期：正在加载）。
• 当用户滑到第 25 张图，清晰图下载完毕，瞬间替换，没有闪烁。
• CPU 占用极低，因为 IntersectionObserver 是系统级调用的。

结论：方案 B 的用户体验（LCP – Largest Contentful Paint）会显著提升，页面滑动会像丝绸一样顺滑。

---

第九部分：React 18 的并发特性与图片加载

现在是 React 18 时代了，咱们得聊聊并发渲染。

在并发模式下，React 可以暂停、恢复渲染任务。这给我们带来了一个新挑战：如果 React 暂停了渲染，图片加载完成了怎么办？

在 React 18 之前，onLoad 事件触发时，组件可能还在渲染中，状态更新可能会导致组件重新渲染。但在并发模式下，如果组件处于 Suspense 状态，我们可能需要更严谨的处理。

不过，对于我们的 ProgressiveImage 组件，目前的实现（基于 useEffect 和 onLoad）是兼容并发模式的。因为 onLoad 是浏览器原生的，它会在 DOM 更新后立即触发，不受 React 调度器的影响。

我们可以更进一步，利用 useDeferredValue 来优化。如果图片还在加载中，我们可以让 React 延迟更新高优先级的 UI，优先展示模糊图。但这通常用于复杂的组件树，对于单张图片，目前的实现已经足够优秀。

---

第十部分：终极代码封装 —— 生产级组件

最后，为了方便大家直接复制粘贴到生产环境，我把之前的逻辑整合成一个更加健壮、带有 Loading 状态和默认占位图的组件。

import React, { useState, useEffect, useRef } from 'react';

const LazyLoadImage = ({ 
  src, 
  blurSrc, 
  alt = '', 
  className = '', 
  style = {}, 
  placeholderColor = '#e0e0e0',
  loadingText = 'Loading...'
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isIntersecting, setIsIntersecting] = useState(false);
  const [hasError, setHasError] = useState(false);

  // 使用 Intersection Observer 钩子（需要安装 react-intersection-observer）
  // 如果不想装库，可以用原生 useRef 实现，见下文
  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.01,
    rootMargin: "50px" // 提前 50px 加载
  });

  useEffect(() => {
    if (inView) {
      loadImages();
    }
  }, [inView]);

  const loadImages = () => {
    if (!src) return;

    // 1. 加载模糊图
    const blurImage = new Image();
    blurImage.src = blurSrc;

    blurImage.onload = () => {
      setIsLoaded(true);
    };

    blurImage.onerror = () => {
      setHasError(true);
    };

    // 2. 加载清晰图（可选，如果想预加载清晰图）
    const sharpImage = new Image();
    sharpImage.src = src;
    sharpImage.onload = () => {
      // 可以在这里加埋点
    };
    sharpImage.onerror = () => {
      setHasError(true);
    };
  };

  if (hasError) {
    return (
      <div 
        className={`lazy-load-error ${className}`} 
        style={{ ...style, background: placeholderColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
      >
        <span>Failed to load image</span>
      </div>
    );
  }

  return (
    <div 
      ref={ref}
      className={`progressive-image-container ${className}`} 
      style={{ 
        ...style, 
        position: 'relative', 
        overflow: 'hidden', 
        backgroundColor: isLoaded ? 'transparent' : placeholderColor 
      }}
    >
      {/* 模糊图 */}
      <img 
        src={blurSrc} 
        alt={alt} 
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          width: '100%', 
          height: '100%', 
          objectFit: 'cover',
          opacity: isLoaded ? 0 : 1,
          transition: 'opacity 0.3s ease',
          filter: 'blur(8px)'
        }} 
      />

      {/* 清晰图 */}
      <img 
        src={src} 
        alt={alt} 
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          width: '100%', 
          height: '100%', 
          objectFit: 'cover',
          opacity: isLoaded ? 1 : 0,
          transition: 'opacity 0.3s ease'
        }} 
        onLoad={() => setIsLoaded(true)}
        onError={() => setHasError(true)}
      />
    </div>
  );
};

// 为了不依赖外部库，这里提供一个手动实现的 Observer Hook
function useInView(options = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  const observerRef = useRef(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        // 可选：一旦进入视口，就停止观察
        observer.unobserve(element);
      }
    }, options);

    observer.observe(element);
    observerRef.current = observer;

    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [ref, options]);

  return { ref, inView };
}

export default LazyLoadImage;

---

结语：告别“白屏”，拥抱“丝滑”

好了，各位，咱们今天的讲座就到这里。

回顾一下我们今天做的事情：

1. 识别痛点：图片加载慢、白屏、布局抖动。
2. 引入工具：Intersection Observer API，取代了低效的 scroll 事件。
3. 实现方案：双图策略 + 预加载，实现了从模糊到清晰的渐进式渲染。
4. 工程化：考虑了错误处理、性能优化和 React 18 的并发特性。

记住，好的代码不仅仅是能跑，更是要让用户感觉不到你的存在。当用户在滑动屏幕时，图片已经悄悄地准备好了；当图片出现时，它已经是高清的。这就是我们追求的“隐形性能”。

下次当你写长列表或者图片画廊的时候，别再只用 <img> 标签了。试试这个 LazyLoadImage 组件，让你的网站活起来，让图片动起来。

祝大家编码愉快，手指永远丝滑！