首页 > 网络编程 > JavaScript > javascript类库 > React > react 图片懒加载

react实现图片懒加载的三种方式

2025-03-10 09:26:46 作者：前段技术人

本文主要介绍了react实现图片懒加载的三种方式,包括利用浏览器原生的loading="lazy"属性,使用react-lazyload库以及通过IntersectionObserver API手动实现,具有一定的参考价值,感兴趣的可以了解一下

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

优点：

无需引入额外的库，减少项目体积。
可以根据需求进行自定义。

缺点：

代码实现相对复杂。
对于旧版本的浏览器可能需要使用 polyfill。

到此这篇关于react实现图片懒加载的三种方式的文章就介绍到这了,更多相关react 图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！