如何在页面渲染前预加载Next.js Image组件的图片？

忽略常规最佳实践的前提下，我需要在页面切换或渲染前预加载一组图片。场景是要同时展示并动画加载大量大图，希望页面先显示加载spinner，等初始大图下载缓存完成后一次性展示。

在标准React中可以这样实现：

await Promise.all(
    images.map(async (url) => {
        return new Promise((resolve) => {
            const image = new Image();
            image.src = url;
            image.onload = () => resolve(true);
        });    
    })
)

加载完成后切换isLoading状态。但Next.js的Image组件需要加入DOM才会加载图片，且图片URL会随多种条件变化，无法沿用原方案。请问是否有办法让浏览器在DOM添加前下载Next.js Image组件生成的图片源？

方法1：手动构造Next.js优化后的图片URL #

Next.js Image会根据图片尺寸、格式、质量等参数生成优化后的请求地址，你可以按照它的URL规则手动构造这些地址，再用标准的Image实例预加载：

1. 整理每张图片的原始URL、目标宽度、质量、格式（比如webp）等参数
2. 按照格式/_next/image?url=[编码后的原始URL]&w=[宽度]&q=[质量]&fm=[格式]拼接出优化后的URL
3. 复用你原来的Promise.all逻辑预加载这些URL

示例代码：

// 假设你有一组带配置的图片列表
const imageConfigs = [
  { url: '/images/banner-1.jpg', width: 1200, quality: 80, format: 'webp' },
  { url: '/images/photo-2.png', width: 800, quality: 75, format: 'png' },
  // 更多图片配置...
];

// 预加载逻辑
await Promise.all(
  imageConfigs.map(async (config) => {
    return new Promise((resolve) => {
      const encodedUrl = encodeURIComponent(config.url);
      // 构造Next.js优化后的图片地址
      const preloadUrl = `/_next/image?url=${encodedUrl}&w=${config.width}&q=${config.quality}&fm=${config.format}`;
      
      const img = new Image();
      img.src = preloadUrl;
      img.onload = () => resolve(true);
      img.onerror = () => resolve(true); // 加载失败也标记完成，避免卡住
    });
  })
);

// 预加载完成，切换状态显示图片
setIsLoading(false);

方法2：用隐藏容器渲染Next.js Image组件 #

可以先在页面中渲染一个完全不可见的容器，把所有需要预加载的Next.js Image组件放进去，等所有图片加载完成后，再把正式的图片区域显示出来：

// 预加载组件
function ImagePreloader({ images, onAllLoaded }) {
  const [loadedCount, setLoadedCount] = useState(0);

  useEffect(() => {
    // 所有图片加载完成后触发回调
    if (loadedCount === images.length) {
      onAllLoaded();
    }
  }, [loadedCount, images.length, onAllLoaded]);

  // 用绝对定位把容器移出可视区域，不影响页面布局
  return (
    <div style={{ position: 'fixed', top: '-9999px', left: '-9999px', width: 0, height: 0, overflow: 'hidden' }}>
      {images.map((img, idx) => (
        <Image
          key={idx}
          src={img.url}
          width={img.width}
          height={img.height}
          alt="preload"
          onLoad={() => setLoadedCount(prev => prev + 1)}
          onError={() => setLoadedCount(prev => prev + 1)}
        />
      ))}
    </div>
  );
}

// 页面中使用
function GalleryPage() {
  const [isLoading, setIsLoading] = useState(true);
  // 你的图片配置列表
  const images = [
    { url: '/images/shot-1.jpg', width: 1000, height: 600, alt: '风景1' },
    // 更多图片...
  ];

  return (
    <>
      {/* 加载状态 */}
      {isLoading && <div className="spinner">加载中...</div>}

      {/* 预加载组件，加载完成后切换状态 */}
      {isLoading && (
        <ImagePreloader 
          images={images} 
          onAllLoaded={() => setIsLoading(false)} 
        />
      )}

      {/* 正式显示的图片区域 */}
      {!isLoading && (
        <div className="image-grid">
          {images.map((img, idx) => (
            <Image 
              key={idx} 
              src={img.url} 
              width={img.width} 
              height={img.height} 
              alt={img.alt}
              className="grid-item"
            />
          ))}
        </div>
      )}
    </>
  );
}

方法3：静态图片用<link rel="preload">预加载 #

如果你的图片是静态资源（本地或已配置允许的远程域名），可以在页面的<head>中添加预加载链接，提前告诉浏览器下载图片：

// 比如在getServerSideProps中生成预加载链接（静态页面用getStaticProps）
export async function getServerSideProps() {
  const imageList = [
    '/images/header.jpg',
    '/images/gallery/01.jpg',
    // 更多图片URL...
  ];

  // 生成预加载链接数组
  const preloadLinks = imageList.map(url => ({
    rel: 'preload',
    as: 'image',
    href: `/_next/image?url=${encodeURIComponent(url)}&w=1200&q=80`,
    // 可选：添加srcset支持响应式
    imagesrcset: `/_next/image?url=${encodeURIComponent(url)}&w=600&q=80 600w, /_next/image?url=${encodeURIComponent(url)}&w=1200&q=80 1200w`,
    imagesizes: '(max-width: 768px) 600px, 1200px'
  }));

  return { props: { preloadLinks } };
}

// 在页面组件中渲染预加载链接
import Head from 'next/head';

function HomePage({ preloadLinks }) {
  const [isLoading, setIsLoading] = useState(true);

  // 可以监听页面加载状态，或者等预加载完成后切换
  useEffect(() => {
    // 简单示例：延迟切换，实际可以结合图片加载事件
    const timer = setTimeout(() => setIsLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <Head>
        {preloadLinks.map((link, idx) => (
          <link key={idx} {...link} />
        ))}
      </Head>

      {isLoading ? <Spinner /> : (
        {/* 你的图片展示区域 */}
      )}
    </>
  );
}

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