NextJS动态切换URL时快速加载next/image组件的方案问询

1. 切换时立即隐藏旧图，配合加载状态控制 #

可以通过next/image的内置属性或自定义状态，让旧图在URL切换时立刻消失，避免加载等待期间的视觉延迟：

方法A：使用placeholder="empty" #

直接设置占位符为空，状态切换后旧图会被立即移除，新图加载时显示空白（可搭配过渡动画优化体验）：

import Image from 'next/image';
import { useState } from 'react';

export default function ImageSwitcher() {
  const [activeIndex, setActiveIndex] = useState(1);
  const imageUrls = {
    1: '/images/one.jpg',
    2: '/images/two.jpg',
    3: '/images/three.jpg',
    4: '/images/four.jpg',
    5: '/images/five.jpg',
  };

  return (
    <div>
      <button onClick={() => setActiveIndex(1)}>ONE</button>
      <button onClick={() => setActiveIndex(2)}>TWO</button>
      <button onClick={() => setActiveIndex(3)}>THREE</button>
      <button onClick={() => setActiveIndex(4)}>FOUR</button>
      <button onClick={() => setActiveIndex(5)}>FIVE</button>

      <div style={{ position: 'relative', width: 400, height: 300 }}>
        <Image
          src={imageUrls[activeIndex]}
          alt={`Image ${activeIndex}`}
          fill
          placeholder="empty"
          className="transition-opacity duration-300" // 可选：添加淡入动画
        />
      </div>
    </div>
  );
}

方法B：自定义加载状态控制显示 #

利用onLoad事件监听新图加载完成，加载过程中隐藏图片容器，完成后再显示：

import Image from 'next/image';
import { useState } from 'react';

export default function ImageSwitcher() {
  const [activeIndex, setActiveIndex] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const imageUrls = {
    1: '/images/one.jpg',
    2: '/images/two.jpg',
    3: '/images/three.jpg',
    4: '/images/four.jpg',
    5: '/images/five.jpg',
  };

  const handleSwitch = (index) => {
    setIsLoading(true);
    setActiveIndex(index);
  };

  return (
    <div>
      <button onClick={() => handleSwitch(1)}>ONE</button>
      <button onClick={() => handleSwitch(2)}>TWO</button>
      <button onClick={() => handleSwitch(3)}>THREE</button>
      <button onClick={() => handleSwitch(4)}>FOUR</button>
      <button onClick={() => handleSwitch(5)}>FIVE</button>

      <div 
        style={{ 
          position: 'relative', 
          width: 400, 
          height: 300,
          opacity: isLoading ? 0 : 1,
          transition: 'opacity 0.2s'
        }}
      >
        <Image
          src={imageUrls[activeIndex]}
          alt={`Image ${activeIndex}`}
          fill
          onLoad={() => setIsLoading(false)}
        />
      </div>
      {isLoading && <div style={{width:400,height:300,display:'flex',alignItems:'center',justifyContent:'center'}}>加载中...</div>}
    </div>
  );
}

2. 按需预加载相邻图片（而非全部预渲染） #

不用把所有图片都渲染到DOM，而是在用户切换状态后，预加载下一个可能被点击的图片，利用浏览器缓存实现快速切换：

import Image from 'next/image';
import { useState, useEffect } from 'react';

export default function ImageSwitcher() {
  const [activeIndex, setActiveIndex] = useState(1);
  const imageUrls = {
    1: '/images/one.jpg',
    2: '/images/two.jpg',
    3: '/images/three.jpg',
    4: '/images/four.jpg',
    5: '/images/five.jpg',
  };

  // 切换状态后预加载相邻图片
  useEffect(() => {
    const nextIndex = activeIndex + 1;
    const prevIndex = activeIndex - 1;
    // 预加载下一张
    if (imageUrls[nextIndex]) {
      Image.preload(imageUrls[nextIndex]);
    }
    // 预加载上一张
    if (imageUrls[prevIndex]) {
      Image.preload(imageUrls[prevIndex]);
    }
  }, [activeIndex]);

  // 低版本Next.js可使用原生预加载方法
  // const preloadImage = (url) => {
  //   const img = new Image();
  //   img.src = url;
  // };

  return (
    <div>
      {[1,2,3,4,5].map(num => (
        <button key={num} onClick={() => setActiveIndex(num)}>
          {num === 1 ? 'ONE' : num ===2 ? 'TWO' : num===3 ? 'THREE' : num===4 ? 'FOUR' : 'FIVE'}
        </button>
      ))}

      <div style={{ position: 'relative', width: 400, height: 300 }}>
        <Image
          src={imageUrls[activeIndex]}
          alt={`Image ${activeIndex}`}
          fill
          priority // 给当前显示的图片设置优先加载
        />
      </div>
    </div>
  );
}

3. 优化当前图片加载优先级 #

给激活状态的图片设置priority属性，让浏览器优先分配资源加载这张图，缩短加载等待时间：

<Image
  src={imageUrls[activeIndex]}
  alt={`Image ${activeIndex}`}
  fill
  priority // 仅给当前显示的图片设置，不要全局滥用
/>

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