next/image lazy load not working at all with dynamic content

Question

hey, am pretty new to next.js I have a page with few carousels and each carousel has few products, the issue is that all products images are loaded on first paint, around 114 now, am using next/image in the product component which is used in the carousel/swiper component etc..., as you may conclude images are loaded dynamically too, so adding loading="lazy" has no effect (afaik next/image has that behavior by default). am totally stuck now, can anyone give a check list or rules for lazy load to work? also a working example with dynamically added images and a working lazy load maybe can help me debug my issue, any other hints too would be appreciated.
thank you in advance for your time.

American Crow · Accepted Answer

Yes, Nextjs Image lazy loads automatically, however I think Nextjs Image lazy load is only calculated using the distance to the viewport. Quite possible that it fails when used within a carousel. I don't know what carousel lib you are using but i'd suggest that the the carousel component has to control if a slide is in view or lazy loaded.

here is a codesandbox with Embla Carousel and React. (Can exchange img for Image since the coursel handels the logic in this case)
https://codesandbox.io/p/sandbox/embla-carousel-lazy-load-react-jlsq3r?file=%2Fsrc%2Fjs%2FEmblaCarouselLazyLoadImage.tsx

next/image lazy load not working at all with dynamic content

2 Replies