Next.js：如何在用户进入渲染图片的组件前异步加载图片

核心思路 #

不需要将next/image的React元素存入Redux（这确实是反模式，Redux仅适合存储可序列化的状态数据），而是直接预加载图片资源本身。通过原生Image对象触发浏览器下载图片并缓存，Redux只需要维护图片URL列表和对应的加载状态即可。

具体实现步骤 #

1. Redux中维护图片加载状态

定义一个slice来管理图片URL和每个URL的加载状态（loading/loaded/error）：

// features/images/imageSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  imageUrls: [],
  loadingStatus: {} // 键为图片URL，值为加载状态
};

const imageSlice = createSlice({
  name: 'images',
  initialState,
  reducers: {
    setImageUrls: (state, action) => {
      state.imageUrls = action.payload;
      // 初始化新URL的加载状态为loading
      action.payload.forEach(url => {
        if (!state.loadingStatus[url]) {
          state.loadingStatus[url] = 'loading';
        }
      });
    },
    preloadSuccess: (state, action) => {
      state.loadingStatus[action.payload] = 'loaded';
    },
    preloadFailure: (state, action) => {
      state.loadingStatus[action.payload] = 'error';
    }
  }
});

export const { setImageUrls, preloadSuccess, preloadFailure } = imageSlice.actions;
export default imageSlice.reducer;

2. 在页面中触发预加载

在页面的useEffect中，拿到getStaticProps返回的图片URL后，先存入Redux，再通过原生Image对象触发预加载：

// pages/yourPage.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setImageUrls, preloadSuccess, preloadFailure } from '../features/images/imageSlice';
import ImageGallery from '../components/ImageGallery';

export async function getStaticProps() {
  // 替换为你的图片URL获取逻辑
  const imageUrls = await fetch('https://your-api.com/images').then(res => res.json());
  return { props: { imageUrls } };
}

export default function YourPage({ imageUrls }) {
  const dispatch = useDispatch();

  useEffect(() => {
    // 将URL存入Redux
    dispatch(setImageUrls(imageUrls));

    // 逐个预加载图片
    imageUrls.forEach(url => {
      const img = new Image();
      // 若使用Next.js Image的域名白名单，需确保URL在配置内
      img.src = url;
      img.onload = () => dispatch(preloadSuccess(url));
      img.onerror = () => dispatch(preloadFailure(url));
    });
  }, [imageUrls, dispatch]);

  const loadingStatus = useSelector(state => state.images.loadingStatus);

  return <ImageGallery imageUrls={imageUrls} loadingStatus={loadingStatus} />;
}

3. 展示组件根据状态交互

用户点击按钮时，先检查图片加载状态，已加载则直接显示，未加载则提示或展示加载状态：

// components/ImageGallery.js
import { useState } from 'react';
import Image from 'next/image';

export default function ImageGallery({ imageUrls, loadingStatus }) {
  const [visibleImages, setVisibleImages] = useState([]);

  const handleShowImage = (url) => {
    switch (loadingStatus[url]) {
      case 'loaded':
        setVisibleImages(prev => [...prev, url]);
        break;
      case 'loading':
        // 可替换为自定义加载动画
        alert('图片正在加载，请稍候');
        break;
      default:
        alert('图片加载失败');
    }
  };

  return (
    <div className="gallery-container">
      <div className="button-group">
        {imageUrls.map(url => (
          <button
            key={url}
            onClick={() => handleShowImage(url)}
            disabled={loadingStatus[url] === 'error'}
          >
            显示图片：{url.split('/').pop()}
          </button>
        ))}
      </div>
      <div className="image-grid">
        {visibleImages.map(url => (
          <div key={url} style={{ width: 300, height: 200, position: 'relative', margin: '10px' }}>
            <Image
              src={url}
              fill
              alt="用户选择的图片"
              sizes="(max-width: 768px) 100vw, 300px"
              style={{ objectFit: 'cover' }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

额外优化建议 #

• 控制并发加载：如果图片数量较多，可限制同时预加载的数量，避免占用过多带宽。
• 懒加载触发：可以结合Intersection Observer，当用户滚动到按钮附近时再触发预加载，节省初始页面加载资源。
• 缓存复用：浏览器会自动缓存已加载的图片，后续再次使用同一URL时会直接读取缓存，无需重复下载。

内容的提问来源于stack exchange，提问作者IVR