Preloading images below the fold in Next.js

Viewed 1060

I have a button, that if clicked, show an image. I'd like the image to preload before the button is clicked. The button and image are below the fold.

At first, I was going to use the Image component's priority attr, but the docs say:

Should only be used when the image is visible above the fold.

So, then I looked at the loading attr, but the docs say:

This property is only meant for advanced usage. Switching an image to load with eager will normally hurt performance. ... We recommend using the priority property instead

So what should I use for preloading a below the fold image?

1 Answers

You can use the Image property loading="eager"

Like this:

<Image src={'/images/img.jpg'} loading="eager" priority={true} />
Related