NextJS <Image>组件：如何预加载图片实现切换时即时显示

解决方案：Next.js 组件预加载多图方案 #

针对动态切换图片时的加载延迟问题，以下几种方案可实现预加载所有目标图片，同时完整保留Next.js 组件的图片优化、响应式适配等核心优势：

方法1：使用Next.js 13+ App Router的preload函数 #

Next.js 13及以上版本的App Router提供了专门的preload方法，可直接预加载经过优化的图片资源，是最简洁的方案：

'use client';
import { useEffect } from 'react';
import Image from 'next/image';
import Yellow from '@/assets/yellow.png';
import Blue from '@/assets/blue.png';
import Red from '@/assets/red.png';

export default function ColorImage({ color }) {
  useEffect(() => {
    async function preloadAllImages() {
      await Promise.all([
        Yellow.preload(),
        Blue.preload(),
        Red.preload(),
      ]);
    }
    preloadAllImages();
  }, []);

  return (
    <Image
      src={color === "yellow" ? Yellow : color === "blue" ? Blue : Red}
      alt="color image"
      priority
      fill
      sizes="250px"
    />
  );
}

该方法直接复用Next.js的图片优化管道，预加载的资源与最终渲染时使用的完全一致，不会产生额外的冗余请求。

方法2：渲染隐藏组件实现预加载 #

若使用Pages Router或低版本Next.js，可通过渲染隐藏的组件触发预加载逻辑：

import Image from 'next/image';
import Yellow from '@/assets/yellow.png';
import Blue from '@/assets/blue.png';
import Red from '@/assets/red.png';

export default function ColorImage({ color }) {
  return (
    <>
      {/* 用于预加载的隐藏图片容器 */}
      <div className="preload-container">
        <Image src={Yellow} alt="" width={1} height={1} />
        <Image src={Blue} alt="" width={1} height={1} />
        <Image src={Red} alt="" width={1} height={1} />
      </div>
      {/* 主展示图片 */}
      <Image
        src={color === "yellow" ? Yellow : color === "blue" ? Blue : Red}
        alt="color image"
        priority
        fill
        sizes="250px"
      />
    </>
  );
}

搭配以下CSS隐藏预加载容器（避免影响页面布局）：

.preload-container {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

注意不要使用display: none，部分浏览器会跳过这类元素的资源加载。

方法3：结合getImageProps与原生Image对象预加载 #

如果需要更灵活的加载控制，可通过getImageProps获取Next.js优化后的图片地址，再用原生Image对象触发预加载：

'use client';
import { useEffect } from 'react';
import Image, { getImageProps } from 'next/image';
import Yellow from '@/assets/yellow.png';
import Blue from '@/assets/blue.png';
import Red from '@/assets/red.png';

export default function ColorImage({ color }) {
  useEffect(() => {
    const imageSources = [Yellow, Blue, Red];
    imageSources.forEach((src) => {
      const { src: optimizedSrc } = getImageProps({ 
        src, 
        width: 250, 
        height: 250 
      });
      const img = new Image();
      img.src = optimizedSrc;
    });
  }, []);

  return (
    <Image
      src={color === "yellow" ? Yellow : color === "blue" ? Blue : Red}
      alt="color image"
      priority
      fill
      sizes="250px"
    />
  );
}

这种方法手动触发加载流程，但通过getImageProps确保加载的是经过Next.js优化的图片资源，与主组件使用的资源完全匹配。

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