React 延迟加载图像：基于 loading=’lazy’ 属性与 React Refs 的图片曝光加载性能对比

各位下午好，欢迎来到今天的“React 性能优化特训营”。我是你们的讲师，今天我们不谈虚的，我们来聊聊怎么让那些“大块头”图片学会“偷懒”。

想象一下，你的网页就像一个拥挤的地铁车厢。图片就是那些背着巨大登山包的乘客。如果你把他们全部塞进车厢（一次性加载），地铁（浏览器）就会瘫痪，直接抛锚，用户体验直接跌停板。

所以，我们的目标只有一个：只加载那些乘客真正会看到的图片。

今天，我们要讨论两种主要的“偷懒”策略：一种是浏览器自带的原生技能——loading='lazy'；另一种是我们前端工程师自己动手丰衣足食的“黑科技”——基于 React Refs 和 Intersection Observer API 的自定义曝光加载。

准备好了吗？让我们开始这场关于“懒”的哲学探讨。

---

第一部分：懒惰的哲学与原生的诱惑

首先，我们要给“延迟加载”正个名。这不叫懒，这叫按需分配资源。这是现代 Web 开发的基石。

在 React 生态中，最简单、最直接的方法是什么？就是 HTML5 原生提供的 loading="lazy" 属性。

1.1 原生懒加载：浏览器是个好帮手

你只需要在 <img> 标签上加一行代码：

import React from 'react';

const LazyImage = ({ src, alt }) => {
  return (
    <img 
      src={src} 
      alt={alt} 
      loading="lazy" // 哇，就这么简单？
    />
  );
};

export default LazyImage;

看到没？一行代码，搞定。浏览器会自动监测这个图片是否进入了视口。如果没看到，它就乖乖在后台装死，直到你滚轮滑过去。

优点：

• 零代码： 你不需要写任何逻辑。
• 零心智负担： 不用担心内存泄漏，不用手动 cleanup。
• 原生优化： 浏览器内核（Chrome, Firefox, Edge）对这块优化得很溜，通常比你自己写的还快。

缺点（重点来了）：

• Safari 的“渣男”行为： 这是一个巨大的坑。在 Safari（特别是 iOS Safari）上，loading="lazy" 支持非常糟糕。直到 2021 年 3 月的 Safari 14.1 才开始支持。在此之前，Safari 会完全忽略这个属性，图片会一股脑地全加载出来。这意味着如果你在 iOS 上遇到瀑布流，Safari 的用户会先看到一堆占位符，然后突然“砰”的一下所有图片都出来了，体验极差。
• 无法自定义占位符： loading="lazy" 只负责加载图片，它不管图片加载前的样子。如果图片很大，加载前那几秒钟的空白会让用户觉得网页卡死了。
• 不够灵活： 你很难控制“什么时候加载”。比如，你希望图片距离视口还有 200px 时就开始加载，而不是等到图片贴到脸上才开始。

所以，虽然原生很香，但我们不能全指望它。

---

第二部分：React Refs 与 Intersection Observer——我们要自己动手

既然原生不够完美，我们就得自己造轮子。这里的核心技术是 Intersection Observer API。

2.1 什么是 Intersection Observer？

你可以把它想象成图片的“保镖”。它站在视口旁边，手里拿着望远镜，盯着图片。

• React Refs：这是我们的“钥匙”。在 React 中，我们通过 useRef 给 DOM 节点一把钥匙。有了这把钥匙，我们就能拿到真实的 DOM 元素，把它交给 Observer 去监听。
• Observer：这是“监听器”。一旦图片进入了观测范围，Observer 就会触发回调函数，告诉 React：“嘿，哥们，这图片该加载了！”

2.2 核心代码实现：自定义 Hook

为了不重复造轮子，我们封装一个 useIntersectionObserver Hook。这可是个硬菜。

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

// 一个简单的加载占位符组件
const Placeholder = () => (
  <div className="placeholder-skeleton" style={{ 
    width: '100%', 
    height: '200px', 
    background: '#f0f0f0',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#999'
  }}>
    Loading...
  </div>
);

const useIntersectionObserver = (options = {}) => {
  const { threshold = 0.1, rootMargin = '0px' } = options;
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);
  const [error, setError] = useState(null);

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

    // 创建观察者实例
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            // 可选：一旦看到就停止观察，避免重复触发
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold, rootMargin }
    );

    observer.observe(currentElement);

    // 清理函数：组件卸载时断开连接，防止内存泄漏
    return () => {
      if (currentElement) {
        observer.unobserve(currentElement);
        observer.disconnect();
      }
    };
  }, [threshold, rootMargin]);

  return { ref, isVisible, hasLoaded, setHasLoaded, error, setError };
};

// 使用 Hook 的图片组件
const SmartImage = ({ src, alt, className }) => {
  // 初始化 Hook
  const { ref, isVisible } = useIntersectionObserver();

  // 只有当 isVisible 为 true 时，才真正请求图片
  // 注意：这里为了演示，直接渲染 img 标签。
  // 在实际项目中，你可能需要配合 Suspense 或者自定义的 Image 组件。
  return (
    <div ref={ref} className={className}>
      {!isVisible ? (
        <Placeholder />
      ) : (
        <img 
          src={src} 
          alt={alt} 
          onLoad={() => console.log('Image loaded!')}
          onError={(e) => console.error('Image failed', e)}
        />
      )}
    </div>
  );
};

export default SmartImage;

这段代码讲了什么？

1. ref 是关键：我们通过 const ref = useRef(null) 创建了一个 ref。这个 ref 会在 JSX 中绑定到外层 div（或者 img 本身）。
2. IntersectionObserver：这是浏览器提供的原生 API，非常高效，因为它不会像 scroll 事件监听器那样频繁触发回调。
3. isVisible 状态：这就像一个开关。只有开关打开（图片进入视口），我们才真正渲染 <img> 标签的 src 属性。
4. 清理：别忘了 return () => { ... }。这是 React 的生命周期管理，非常重要。

---

第三部分：性能大对决——谁才是真正的赢家？

现在，让我们把这两个方案放到天平上称一称。

场景设定：

• 一张包含 100 张高清风景图的瀑布流页面。
• 每张图片 2MB。
• 用户的设备：一台 iPhone 12（Safari 内核）和一台 MacBook Pro（Chrome 内核）。

3.1 loading="lazy" 的表现

• Chrome/Edge： 表现极佳。FCP（首次内容绘制）大幅提升，因为浏览器在后台悄悄预加载了图片。内存占用很低。
• Safari： 表现糟糕。在 iOS 14 以下，图片全部堆在 DOM 里，等待加载。页面瞬间卡顿。
• 加载策略： 它会在图片进入视口前一小段距离就开始加载（取决于浏览器的实现），这通常是好的。

3.2 useIntersectionObserver 的表现

• Chrome/Edge： 表现依然极佳，甚至更好。为什么？因为我们可以控制 rootMargin。我们可以设置 rootMargin: "200px"，意思是“图片只要距离视口还有 200px，就开始加载”。这给图片留出了缓冲时间，用户体验更丝滑。
• Safari： 完美运行。因为这是我们自己写的，不管浏览器支持不支持 loading，我们的代码都能跑。
• 加载策略： 纯粹的“曝光即加载”。用户看到的一瞬间才开始下载。

3.3 性能指标对比（模拟数据）

指标	loading="lazy"	useIntersectionObserver
首屏渲染 (FCP)	快	快
最大内容绘制 (LCP)	快	快
内存占用	极低	略高（因为维护了一个 Observer 列表）
代码复杂度	极低	中等
Safari 兼容性	差	完美
自定义能力	无	高（占位符、骨架屏、错误处理）

结论：
如果你的项目不需要兼容老版本的 Safari，或者你的图片量不大，loading="lazy" 是首选，因为它省心。
如果你的项目追求极致的体验，需要兼容所有浏览器，并且需要自定义占位符或骨架屏，那么 useIntersectionObserver 是不二之选。

---

第四部分：进阶技巧——如何让 Refs 更聪明？

光有个 Observer 不够，我们得把它打磨成艺术品。

4.1 处理图片加载失败

图片加载失败是常态。用 loading="lazy" 时，如果加载失败，浏览器默认行为可能让你看不清错误。用 Refs，我们可以手写错误处理逻辑。

const useIntersectionObserver = (options = {}) => {
  // ... 之前的代码 ...
  const [error, setError] = useState(null);

  const handleLoad = () => {
    setHasLoaded(true);
    setError(null);
  };

  const handleError = (e) => {
    console.error('Image failed to load', e);
    setError('Failed to load image');
    // 即使加载失败，我们也把 hasLoaded 设为 true，防止一直显示 loading
    setHasLoaded(true);
  };

  return { ref, isVisible, hasLoaded, error, setError };
};

// 在组件中使用
const SmartImage = ({ src, alt }) => {
  const { ref, isVisible, hasLoaded, error } = useIntersectionObserver();

  return (
    <div ref={ref}>
      {!hasLoaded ? (
        <Placeholder />
      ) : (
        <img 
          src={isVisible ? src : ''} // 只有可见时才设置 src
          alt={alt}
          onLoad={handleLoad}
          onError={handleError}
        />
      )}
      {error && <div className="error-message">图片丢失了</div>}
    </div>
  );
};

4.2 骨架屏——提升感知性能

loading="lazy" 无法提供骨架屏。但用 Refs，我们可以轻松实现。骨架屏是加载前显示的灰色块，让用户觉得页面还在动，不会觉得卡顿。

const LazyImageWithSkeleton = ({ src, alt }) => {
  const { ref, isVisible, hasLoaded } = useIntersectionObserver();
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div ref={ref} className="image-container">
      {!isLoaded ? (
        <div className="skeleton">
          <div className="skeleton-line"></div>
          <div className="skeleton-line"></div>
        </div>
      ) : (
        <img 
          src={isVisible ? src : ''} 
          alt={alt} 
          onLoad={() => setIsLoaded(true)}
        />
      )}
    </div>
  );
};

4.3 rootMargin 的艺术

rootMargin 是 Intersection Observer 的灵魂参数。默认是 0px，意味着图片一贴脸就开始加载。这有时候太激进了。

试试这个：

const options = {
  rootMargin: '100px 0px', // 顶部留白 100px，底部留白 0px
  threshold: 0.1
};

这意味着，当图片距离视口顶部还有 100px 时，就开始加载。这给了图片下载留出缓冲时间，防止用户在图片刚出来的一瞬间还在转圈圈。

---

第五部分：React Refs 的“秘密武器”——直接操作 DOM

为什么我们要用 Refs？为什么不用 Context 或者 State？

因为 IntersectionObserver 必须要观察一个真实的 DOM 元素。React 的状态更新是异步的，而且不能直接操作 DOM（除非你打破规则）。

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。这个 ref 持有对 DOM 节点的直接引用。

// 深入理解 Refs
const LazyImage = () => {
  const imgRef = useRef(null);

  const handleScroll = () => {
    // 如果 ref.current 存在，我们可以直接访问 img 元素
    if (imgRef.current) {
      const rect = imgRef.current.getBoundingClientRect();
      console.log(rect.top, window.innerHeight); // 检查是否在视口内
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <img ref={imgRef} src="..." />;
};

虽然上面的代码也能实现懒加载（通过 scroll 监听），但这性能极差，因为 scroll 事件触发频率太高了。这就是为什么我们用 IntersectionObserver 替代它。

注意： 在现代 React 开发中，我们要尽量少用 ref 去直接操作 DOM（比如 ref.current.style）。但在 Intersection Observer 这种必须观察 DOM 位置的场景下，Ref 是唯一的钥匙。

---

第六部分：实战代码——一个生产级别的 LazyLoad Hook

让我们把前面所有的知识点整合起来，写一个真正能上线的 Hook。它要处理：

1. 节流（Throttle）。
2. 占位符。
3. 错误处理。
4. 占位图切换。

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

/**
 * 高级图片懒加载 Hook
 * @param {Object} options 配置项
 * @param {number} options.threshold 交叉比例 (0-1)
 * @param {string} options.rootMargin 交叉边界
 * @param {ReactNode} options.placeholder 占位符组件
 * @param {boolean} options.unobserveOnLoad 加载后是否停止观察
 */
const useAdvancedLazyLoad = (options = {}) => {
  const {
    threshold = 0.1,
    rootMargin = '0px',
    placeholder = null,
    unobserveOnLoad = true
  } = options;

  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);
  const [error, setError] = useState(false);
  const observerRef = useRef(null);

  // 监听可见性变化
  useEffect(() => {
    const currentElement = ref.current;
    if (!currentElement) return;

    // 创建 Observer
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            if (unobserveOnLoad) {
              observer.unobserve(currentElement);
            }
          }
        });
      },
      { threshold, rootMargin }
    );

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

    // 清理
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [threshold, rootMargin, unobserveOnLoad]);

  const handleLoad = useCallback(() => {
    setHasLoaded(true);
    setError(false);
  }, []);

  const handleError = useCallback((e) => {
    console.error('Image load error:', e);
    setError(true);
    setHasLoaded(true); // 即使错误也要设为 true，防止一直显示 loading
  }, []);

  return { ref, isVisible, hasLoaded, error, handleLoad, handleError };
};

// 使用示例
const ProductCard = ({ product }) => {
  const { ref, isVisible, hasLoaded, error, handleLoad, handleError } = useAdvancedLazyLoad({
    rootMargin: '100px',
    placeholder: <div className="skeleton" />
  });

  return (
    <div className="card" ref={ref}>
      {error ? (
        <div className="error">图片加载失败</div>
      ) : !hasLoaded ? (
        // 这里可以放你的占位符，比如骨架屏
        <div className="skeleton">Loading...</div>
      ) : (
        <img 
          src={isVisible ? product.image : ''} // 关键：只有可见才赋值 src
          alt={product.name}
          onLoad={handleLoad}
          onError={handleError}
        />
      )}
    </div>
  );
};

---

第七部分：性能优化的“玄学”与“科学”

在讨论性能时，我们经常听到两个词：感知性能 和 实际性能。

• 实际性能：数据说话。图片下载速度、DOM 节点数量、内存占用。
• 感知性能：用户感觉。页面会不会闪烁？有没有白屏？

为什么 useIntersectionObserver 往往比 loading='lazy' 感知性能更好？

因为 loading='lazy' 是浏览器实现的。浏览器为了性能优化，有时候会把 loading='lazy' 的图片放在后台线程加载，或者直接丢弃 DOM。这可能导致图片出现“闪烁”或“空白”。

而使用 useIntersectionObserver，我们完全控制了加载逻辑。我们可以先显示一个占位符，等图片数据到了再替换。这种“先有骨架，后有血肉”的策略，极大地缓解了用户的焦虑。

还有一个技巧：

如果你使用了 loading="lazy"，记得配合 width 和 height 属性。为什么？因为懒加载的图片在加载前是不占据布局空间的（或者占据空间很小），这会导致页面布局抖动（CLS）。如果你给了固定的宽高，浏览器就能提前预留位置，图片加载出来时不会把旁边的文字挤跑。

<img 
  loading="lazy" 
  width="300" 
  height="200" 
  src="..." 
/>

---

第八部分：总结——如何选择？

好了，今天的讲座接近尾声。让我们最后来个灵魂拷问：面对一个新项目，你该选哪个？

选择 loading="lazy" 的情况：

1. 项目很新，不需要兼容 iOS Safari 14 以下。
2. 图片量少（比如博客文章列表，每页 5 张图）。
3. 你很懒（褒义），不想写额外的代码。
4. 追求极致的简洁。

选择 useIntersectionObserver 的情况：

1. 项目很复杂，需要兼容所有旧浏览器。
2. 图片量巨大（比如电商首页、瀑布流、长图画廊）。
3. 你需要高度定制（骨架屏、自定义占位符、加载失败重试机制）。
4. 你想要精细控制加载时机（通过 rootMargin）。

最后的建议：

不要迷信“原生就是快”。在 React 生态里，工具的目的是解决复杂问题。如果你只是为了加一行属性，那不是工程能力，那是复制粘贴。

当你下次面对一张 5MB 的大图时，请记住：做一个负责任的开发者，让你的图片学会“等待”，直到被需要的那一刻。

谢谢大家！如果有问题，欢迎在评论区扔砖头（提问）。