react to realize three ways to lazy image loading

Implementing lazy image loading in React can improve the performance of the page, especially in pages with a large number of images, which can avoid performance problems caused by loading all images at once. Here are some common implementation methods for you:

1. Use the loading="lazy" attribute of HTML

Modern browsers natively support lazy loading of pictures, by giving<img>Tag Addloading="lazy"Attributes can be implemented.

import React from 'react';

const LazyImage = () => {
    return (
        <img
            src="/"
            alt="Lazy loaded image"
            loading="lazy"
        />
    );
};

export default LazyImage;

advantage：

• Easy to use, no additional libraries required.
• The browser is natively supported and has good compatibility.

shortcoming：

• It may not be supported for older browsers.

2. Use the react-lazyload library

react-lazyloadIt is a commonly used React lazy loading library, which can help you easily achieve lazy loading of images.

npm install react-lazyload

Example of usage

import React from 'react';
import LazyLoad from 'react-lazyload';

const LazyImage = () => {
    return (
        <LazyLoad>
            <img
                src="/"
                alt="Lazy loaded image"
            />
        </LazyLoad>
    );
};

export default LazyImage;

Custom configuration

react-lazyloadSome configuration options are provided, such asthreshold(Threshold for triggering loading)placeholder(placeholder before loading) etc.

import React from 'react';
import LazyLoad from 'react-lazyload';

const LazyImage = () => {
    return (
        <LazyLoad
            threshold={200}
            placeholder={<div>Loading...</div>}
        >
            <img
                src="/"
                alt="Lazy loaded image"
            />
        </LazyLoad>
    );
};

export default LazyImage;

advantage：

• Feature-rich, with multiple configuration options available.
• Good compatibility and supports older versions of browsers.

shortcoming：

• Additional libraries need to be introduced, increasing the volume of the project.

3. Use the IntersectionObserver API to implement it manually

IntersectionObserveris a native JavaScript API used to observe the intersection state of the target element and the viewport. You can use it to manually implement lazy image loading.

import React, { useRef, useEffect } from 'react';

const LazyImage = () => {
    const imgRef = useRef(null);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            ((entry) => {
                if () {
                    const img = ;
                     = ;
                    (img);
                }
            });
        });

        if () {
            ();
        }

        return () => {
            if () {
                ();
            }
        };
    }, []);

    return (
        <img
            ref={imgRef}
            data-src="/"
            alt="Lazy loaded image"
            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
        />
    );
};

export default LazyImage;

advantage：

• No additional libraries need to be introduced, reducing project size.
• It can be customized according to your needs.

shortcoming：

• The code implementation is relatively complex.
• Polyfill may be required for older browsers.

This is the end of this article about three ways to implement lazy image loading in react. For more related lazy image loading content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!