react实现图片懒加载的三种方式-牛翰网

1. 使用 HTML 的 loading=”lazy” 属性

现代浏览器原生支持图片的懒加载，通过给 <img> 标签添加 loading="lazy" 属性即可实现。

import React from 'react';

const LazyImage = () => {
    return (
        <img
            src="https://example.com/image.jpg"
            alt="Lazy loaded image"
            loading="lazy"
        />
    );
};

export default LazyImage;

优点：

简单易用，无需额外的库。
浏览器原生支持，兼容性较好。

缺点：

对于旧版本的浏览器可能不支持。

2. 使用 react-lazyload 库

react-lazyload 是一个常用的 React 懒加载库，它可以帮助你轻松实现图片懒加载。

npm install react-lazyload

使用示例

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

const LazyImage = () => {
    return (
        <LazyLoad>
            <img
                src="https://example.com/image.jpg"
                alt="Lazy loaded image"
            />
        </LazyLoad>
    );
};

export default LazyImage;

自定义配置

react-lazyload 提供了一些配置选项，例如 threshold（触发加载的阈值）、placeholder（加载前的占位符）等。

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

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

export default LazyImage;

优点：

功能丰富，提供了多种配置选项。
兼容性好，支持旧版本的浏览器。

缺点：

需要引入额外的库，增加了项目的体积。

3. 使用 IntersectionObserver API 手动实现

IntersectionObserver 是一个原生的 JavaScript API，用于观察目标元素与视口的交叉状态。可以利用它手动实现图片懒加载。

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

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

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    observer.unobserve(img);
                }
            });
        });

        if (imgRef.current) {
            observer.observe(imgRef.current);
        }

        return () => {
            if (imgRef.current) {
                observer.unobserve(imgRef.current);
            }
        };
    }, []);

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

export default LazyImage;

优点：