You can preload an image with new Image() (native web API)

new Image().src = url;

Notice that the cache will be released if you're no longer displaying the image after few seconds
Hence, the amount of preloaded images is still limited

A dirty way to ensure the image is not cleared from cache: manually fetch the image with JavaScript then use it to construct a data URL

thanks, this worked for me! just wondering, is there any way to preload images using the Image component from next.js? or is it just better to preload them with new Image().src in this case?

what would this look like? id like to learn about this

call [revokeObjectUrl](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL_static) when you no longer need that image

would this work if i'm getting images from the public folder for example?

yes src can be any image URLs, /your/image.png or https://external.site.com/image.png both work

normally the img tag handles the fetching, what i did here is essentially handle the fetching myself manually instead of having the img tag do it

The built-in <image /> component won't preload all the images unless they're mounted. The method mentioned by joulev or me will be better for that

oh dang i didnt know thats how the img tag worked, but it makes sense. thanks for your help!!!

thanks for this, i didnt know that's how the image component worked next.js

appreciate the help y'all :3

Hi sorry to bother you guys again, it looks like the images are preloading in the network tab but i'm not sure how to render the images in my jsx

  useEffect(()=>{
    window.addEventListener('scroll', scrollProgress);

    const preloadImages = () => {
      const emptyArray = [...Array(frameCount+1).keys()]

      const imageArray = emptyArray.map((element)=>{
        const img = new Image();
        img.src = `/image-sequence/animation (${element}).png`
        img.alt = 'hi'
        return img;
      })
      setImages(imageArray)
    }

    preloadImages();
    return () => window.removeEventListener('scroll', scrollProgress)
  },[])

I tried this but it didn't work

const [images, setImages] = useState([])
...
...
...
 {images[frame]}

wait nvm i'm dumb a regular img tag still worked an made use of the preloaded images