React如何实现模糊到清晰的渐进式图片加载动画？

在弱网环境或者图片资源较大的场景下，页面中的图片往往需要几秒钟才能完全显示，这段时间里用户看到的要么是一片空白，要么是一直转圈的加载图标，体验非常糟糕。渐进式图片加载的思路是：先用一张体积极小的模糊缩略图占住位置，让页面结构立刻稳定下来，等高清原图在后台加载完成后，再通过一段平滑的过渡动画把模糊图淡出、清晰图淡入。这种效果在Medium等国外内容平台上已经被广泛使用，视觉上非常舒适。下面我们来看看在React中如何一步步实现它。

渐进式加载的核心原理

整个方案的底层逻辑其实很简单，可以拆成三层。第一层是占位图：生成一张宽度只有20像素左右的缩略图，由于体积通常只有几百字节，几乎可以瞬间加载完成，我们再通过CSS的filter: blur()把它放大并模糊化，让它看起来像一张有意为之的毛玻璃效果图。第二层是原图加载：<img>标签正常请求高清图片，但初始阶段用opacity: 0把它隐藏起来，同时在后台默默加载。第三层是状态切换：监听原图的onLoad事件，一旦触发就把组件状态标记为已加载，再借助CSS transition让原图从透明渐变到不透明，同时模糊层淡出，两者叠加就形成了模糊到清晰的丝滑过渡。

这里有一个容易被忽略的细节：图片从缓存加载时onLoad事件可能在React挂载监听之前就已经触发，导致状态永远不更新。解决办法是在useEffect中主动检查img.complete属性，如果图片已经加载完毕就直接设置状态，避免卡在模糊图上。另外，模糊层淡出之后要记得加上pointer-events: none，防止它挡住上层清晰图的交互。

低成本模糊占位图的生成方式

占位图的质量决定了最终效果的上限。最常用的方案是让后端在图片上传时同步生成一张缩略图，通过URL参数区分，比如photo.jpg?w=20。很多云存储和图床服务（如七牛、阿里云OSS）都支持图片处理参数，直接在URL后面拼上缩放指令即可拿到小图，几乎零成本。

如果后端暂时不支持动态缩放，也可以用Base64的方式把缩略图直接内联到代码或接口返回的JSON里。20像素宽的JPEG经过Base64编码后通常不超过1KB，嵌入接口数据中随首屏内容一起返回，浏览器渲染时完全不需要额外发起请求。还有一种更彻底的做法是只提取图片的主色调，用纯色块加模糊渐变作为占位，虽然细节全无，但胜在实现简单，适合图片内容本身不是重点的场景。

需要注意的是，模糊缩略图被拉伸到容器尺寸后边缘会出现色斑，这是blur()滤镜的固有副作用。可以在容器上设置overflow: hidden并让模糊图向外溢出一段距离（比如scale(1.1)），把边缘裁掉，视觉上就干净了。

在React中封装可复用的加载组件

把上面的原理封装成一个通用组件，使用时只需要传入占位图地址和原图地址。下面是一个完整的实现示例：

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

function ProgressiveImage({ placeholder, src, alt, className }) {
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    // 处理图片命中缓存时 onLoad 不触发的问题
    if (imgRef.current && imgRef.current.complete) {
      setLoaded(true);
    }
  }, [src]);

  return (
    <div className={`progressive-wrap ${className || ''}`}>
      {/* 模糊占位层 */}
      <img
        src={placeholder}
        alt=""
        aria-hidden="true"
        className="placeholder"
        style={{ opacity: loaded ? 0 : 1 }}
      />
      {/* 高清原图层 */}
      <img
        ref={imgRef}
        src={src}
        alt={alt}
        className="origin"
        style={{ opacity: loaded ? 1 : 0 }}
        onLoad={() => setLoaded(true)}
      />
    </div>
  );
}

export default ProgressiveImage;

配套的样式代码如下，两层图片绝对定位叠放在同一个容器内，靠opacity的变化配合transition完成过渡：

.progressive-wrap {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.progressive-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.progressive-wrap .placeholder {
  position: absolute;
  inset: 0;
  filter: blur(20px);
  transform: scale(1.1); /* 放大裁掉模糊边缘 */
  pointer-events: none;
}

.progressive-wrap .origin {
  position: absolute;
  inset: 0;
}

这个组件的过渡时长可以根据实际调整，0.4秒到0.8秒之间的体验都比较自然。如果想增加一点质感，还可以在过渡完成前给原图加一个初始的filter: blur(10px)，让它在淡入的同时也从模糊变清晰，两层模糊的交叉溶解效果会更加柔和。

结合懒加载进一步优化性能

渐进式加载解决了展示体验问题，但如果一个长页面里有几十张图，全部同时请求依然会造成带宽压力。这时候可以结合IntersectionObserver做懒加载：只有当图片容器进入视口时才开始请求高清原图，模糊占位图因为体积极小可以提前加载，页面滚动时用户看到的始终是有内容的模糊图，而不是空白。

在React中可以封装一个自定义Hook来管理观察逻辑：

function useInView(options) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        observer.disconnect(); // 进入视口后停止观察，只触发一次
      }
    }, options);
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return [ref, inView];
}

在组件中使用时，把inView作为条件来决定是否给原图设置真实的src：src={inView ? src : undefined}。视口外时不发请求，进入视口后才触发加载，与模糊过渡动画配合得天衣无缝。此外还可以给IntersectionObserver配置rootMargin: '200px'，让图片提前200像素开始加载，用户滚动到位置时往往已经加载完成，体验更流畅。

最后提醒一点，如果项目对兼容性要求不高，也可以直接使用原生属性loading="lazy"替代IntersectionObserver方案，代码量更少。但原生懒加载的触发时机由浏览器控制，无法精细调节预加载距离，在需要精确掌控加载行为的场景下，观察器方案仍然是更好的选择。

React渐进式图片加载模糊占位图过渡动画修改时间：2026-09-14 06:26:36