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

user_16824609 0
Viewed 25218

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?

reactjs lazy-loading
3 Answers

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.

user_10568850

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

user_120511860

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