React 懒加载图片 Lazy Image

随着网页内容的日益丰富，图片的加载速度直接影响到用户体验。懒加载（Lazy Loading）是一种优化技术，通过延迟加载不在视口内的图片，减少初始页面加载时间，提升用户体验。本文将从基础概念入手，逐步深入探讨 React 中实现图片懒加载的常见问题、易错点及如何避免，并通过代码案例进行详细解释。

一、懒加载的基本概念

1.1 什么是懒加载？

懒加载是指在页面滚动到某个元素即将进入视口时才加载该元素的内容。对于图片来说，这意味着只有当用户滚动到图片所在的位置时，图片才会开始加载。这样可以显著减少初始页面加载时间，提升用户体验。

1.2 懒加载的好处

• 减少初始加载时间：只加载当前视口内的图片，减少网络请求。
• 节省带宽：用户可能不会滚动到页面的某些部分，因此不需要加载这些部分的图片。
• 提升用户体验：页面加载更快，用户可以更快地看到内容。

二、React 中实现懒加载

2.1 使用 Intersection Observer API

Intersection Observer API 是一个浏览器提供的 API，用于监听目标元素与视口或其他元素的交集情况。它是实现懒加载的理想选择，因为它性能高效且易于使用。

2.2 基本实现步骤

1. 创建一个自定义 Hook：封装 Intersection Observer 的逻辑。
2. 使用自定义 Hook：在组件中使用自定义 Hook 实现懒加载。

2.3 代码示例

2.3.1 自定义 Hook

import { useState, useEffect } from 'react';

function useIntersectionObserver(ref, rootMargin = '0px') {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIntersecting(entry.isIntersecting);
      },
      { rootMargin }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [ref, rootMargin]);

  return isIntersecting;
}

export default useIntersectionObserver;

2.3.2 使用自定义 Hook

import React, { useRef } from 'react';
import useIntersectionObserver from './useIntersectionObserver';

const LazyImage = ({ src, alt }) => {
  const imageRef = useRef(null);
  const isIntersecting = useIntersectionObserver(imageRef);

  const [srcLoaded, setSrcLoaded] = useState(null);

  useEffect(() => {
    if (isIntersecting) {
      setSrcLoaded(src);
    }
  }, [isIntersecting, src]);

  return (
    <div>
      {srcLoaded ? (
        <img ref={imageRef} src={srcLoaded} alt={alt} />
      ) : (
        <div className="placeholder">Loading...</div>
      )}
    </div>
  );
};

export default LazyImage;

2.4 样式示例

.placeholder {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #999;
}

三、常见问题与易错点

3.1 常见问题

3.1.1 图片占位符高度不一致

• 问题：懒加载图片时，图片占位符的高度可能会不一致，导致页面布局抖动。
• 解决方法：为图片占位符设置固定的高度或使用 aspect-ratio 属性。

3.1.2 重复加载图片

• 问题：用户频繁滚动时，图片可能会被重复加载。
• 解决方法：在图片加载完成后，取消 Intersection Observer 的监听。

3.2 易错点

3.2.1 忘记取消监听

• 问题：忘记在组件卸载时取消 Intersection Observer 的监听，导致内存泄漏。
• 解决方法：在 useEffect 的返回函数中取消监听。

3.2.2 未处理 Intersection Observer 兼容性

• 问题：Intersection Observer API 在某些旧浏览器中不支持。
• 解决方法：使用 polyfill 库，如 intersection-observer。

3.3 代码示例

3.3.1 取消监听

import { useState, useEffect, useRef } from 'react';
import useIntersectionObserver from './useIntersectionObserver';

const LazyImage = ({ src, alt }) => {
  const imageRef = useRef(null);
  const isIntersecting = useIntersectionObserver(imageRef);

  const [srcLoaded, setSrcLoaded] = useState(null);

  useEffect(() => {
    if (isIntersecting) {
      setSrcLoaded(src);
    }
  }, [isIntersecting, src]);

  useEffect(() => {
    if (srcLoaded) {
      // 取消监听
      if (imageRef.current) {
        const observer = new IntersectionObserver(() => {});
        observer.unobserve(imageRef.current);
      }
    }
  }, [srcLoaded]);

  return (
    <div>
      {srcLoaded ? (
        <img ref={imageRef} src={srcLoaded} alt={alt} />
      ) : (
        <div className="placeholder">Loading...</div>
      )}
    </div>
  );
};

export default LazyImage;

3.3.2 处理兼容性

import { useState, useEffect, useRef } from 'react';
import useIntersectionObserver from './useIntersectionObserver';
import 'intersection-observer'; // 引入 polyfill

const LazyImage = ({ src, alt }) => {
  const imageRef = useRef(null);
  const isIntersecting = useIntersectionObserver(imageRef);

  const [srcLoaded, setSrcLoaded] = useState(null);

  useEffect(() => {
    if (isIntersecting) {
      setSrcLoaded(src);
    }
  }, [isIntersecting, src]);

  useEffect(() => {
    if (srcLoaded) {
      // 取消监听
      if (imageRef.current) {
        const observer = new IntersectionObserver(() => {});
        observer.unobserve(imageRef.current);
      }
    }
  }, [srcLoaded]);

  return (
    <div>
      {srcLoaded ? (
        <img ref={imageRef} src={srcLoaded} alt={alt} />
      ) : (
        <div className="placeholder">Loading...</div>
      )}
    </div>
  );
};

export default LazyImage;

四、总结

懒加载是一种有效的优化技术，可以显著提升网页的加载速度和用户体验。本文从基础概念入手，逐步介绍了 React 中实现图片懒加载的方法、常见问题、易错点及如何避免，并通过代码案例进行了详细解释。希望本文能帮助开发者更好地理解和应用懒加载技术，提升网页性能。