Next.js Discord

Discord Forum

Is it a good idea to use loading="eager" for carousel images?

Unanswered
Narrow-barred Spanish mackerel posted this in #help-forum
Open in Discord
Narrow-barred Spanish mackerelOP
I have a react slick carousel and my images only start to load after the carousel slides to them, which isn't what i want, they should start loading before they slide into view

adding loading="eager" to the images fixes the issue, but in the next docs seeing "for advanced usecases" makes me scared that i shouldn't do that since i'm a noob.

It suggests using priority but i'm not sure if that would be good for carousel images, i don't really need them to load before anything else on my page, i just want them to start before they slide into view.

3 Replies

Holland Lop
Refer to [this](https://nextjs.org/docs/pages/api-reference/components/image#priority).

"When [images have priority], the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority."
If I had to guess, the loading prop is a lower level yet similar concept to priority. Probably just stick with priority.