How should I implement lazy loading for my images in react? - reactjs

Question

I'm trying to add lazy loading to my react application as I have over 200 images that I don't need on the initial load. If I lazy load the images, does this mean, they won't be loaded until they're needed on the screen?
I'm currently importing 4 groups of about 50 images into .js files and then adding them to objects so they can be dynamically used in my components. It looks like this...
// SportImages.js file
import Football from './images/football.png
import Cricket from './images/cricket.png
import Soccer from './images/soccer.png
... // another 50 or so imports
export default {
Football,
Cricket,
Soccer,
... // another 50 or so files
}
// and then in my component
cards.map(x => {
return (
<img src={SportImages[x.image_ref]} />
)
})
So my question is, should I be using lazy loading in the component file or in the main images file if I want to lazy load every image?

Answer 1

You can add the loading attribute to your image element to lazy-load the images. A complete explainer guide on this attribute can be found on web.dev.
In your case it would probably look as follows:
cards.map(card => (
<img src={SportImages[card.image_ref]} loading="lazy" />
))
You should also make sure to specify the width and height attributes so the browser can place the element on the page with the correct dimensions.

Answer 2

You can use this library called react-lazy-load-image-component
Import the LazyLoadImage component then use it the render you images
cards.map(card => (
<LazyLoadImage src={SportImages[card.image_ref]} {...props}/>
))
You can also add an effect when lazy loading the images. You can check the documentation of the library here
https://www.npmjs.com/package/react-lazy-load-image-component

Answer 3

loading='lazy' attribute Safari not supported
<img loading=lazy src="image.jpg" />
Try this package:
npm i react-lazy-load-image-component
Example:
import React from 'react';
import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
const Gallery = ({ images, scrollPosition }) => (
<div>
{images.map((image) =>
<LazyLoadImage scrollPosition={scrollPosition}
width="100%"
height="auto"
src={image.url} />
)}
</div>
);
export default trackWindowScroll(Gallery);