👀 Views: 42 💬 Answers: 1 📅 Created: 2025-06-09

next.js image lazy-loading JavaScript

I'm experiencing an scenario with the Next.js Image component where images do not load lazily as expected when they are part of a dynamically generated list. I'm using Next.js version 12.1.0 and have set the `loading` attribute to `lazy`, but the images appear to be loading immediately instead of waiting until they're in the viewport. Here's a snippet of my code: ```jsx import Image from 'next/image'; const ImageGallery = ({ images }) => { return ( <div className="gallery"> {images.map((image, index) => ( <div key={index} className="gallery-item"> <Image src={image.src} alt={image.alt} layout="responsive" width={image.width} height={image.height} loading="lazy" /> </div> ))} </div> ); }; ``` I've checked that `IntersectionObserver` is supported in the browsers I'm testing on, and I'm using the latest version of the `next/image` component. However, I still see all images loading as soon as the component mounts, which is causing performance optimization on pages with many images. I've even experimented with different configurations, like wrapping the `Image` component in a scrollable container or changing the `layout` to `fill`, but the behavior remains the same. Any suggestions on how to ensure that lazy loading works correctly in this scenario? I'd be grateful for any help.