Does img loading='lazy' work in react?

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>
  );

You’ve already built the HTML for the entire app dynamically, using React, so it’s not going to do anything – you’re trying to lazy load something that’s already loaded. You need access to (static) HTML for it to work rather than dynamically building it, so no, the attribute won’t do anything.

Okay, I will use other alternatives. Thanks

1 Like