Tengo la siguiente imagen/siguiente en una de mis páginas, con prioridad establecida en verdadero para cargar el activo desde el estado

 const [imageToUse, setImageToUse] = useState(initialImage); <Image src={imageToUse} alt='scrolls' priority={true} ... />

Configuré el estado de tal manera que escucharía en el evento de desplazamiento y llamaría al estado imageToUse desde una nueva imagen a medida que el usuario se desplaza:

 const cycleImages = { 1: "/header/_0011.webp", 2: "/header/_0012.webp", 3: "/header/_0013.webp", .... 37: "/header/_0047.webp", } useEffect(() => { // scrolled at every 30 pixels const y = clientWindowHeight / 30; // Scroll event distance + cycle through a list of objects let label = Math.min(Math.floor(y) + 1, 37) // Set imageToUse let image = cycleImages[label] setImageToUse(image) }

La lógica anterior funciona, pero el único problema que tengo es que <Image /> solo carga con entusiasmo la imagen inicial o la imagen que está a punto de desplazarse, mientras que quiero que cargue con entusiasmo las 37 imágenes y para evitar obtener SOLO cuando se desplaza y crea tartamudeo (es decir, mala experiencia de usuario).

Entonces, ¿cómo puedo cargar las 37 imágenes en NextJS?