I want to introduce a low-quality image placeholder (lqip) and <img loading='lazy/>
into my project. So, I was trying loading = lazy
on a tiny demo. But it seems the attribute lazy
is not even working at all as the browser downloads all the images at once. I even made the wrapping div so big that subsequent images will be farther down the viewport.
I don’t get it anymore. please help.
I did not want to use a third-party library for that.
return (
<div
style={{
width: '400px',
height: '400px',
display: 'flex',
flexDirection: 'column',
}}>
{images.map(imageUrl => (
<img
loading="lazy"
style={{ width: '100%', height: '100%' }}
src={imageUrl}
/>
))}
</div>
);