I have a slideshow component in my Nextjs app that automatically fades each image on top of each other. However, there is an issue where the images are glitchy when they are first displayed because they have just been loaded on the client at the same time they appear. Is there any way I can prefetch all images in the slideshow before starting it? Here is my attempt on doing that which does not work (no errors, just doesn't make a difference)

useEffect(() => {
    images.forEach(image => {
        router.prefetch(image.src);
    });
}, [images, router]);