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

更新时间：2025年03月10日 09:26:45 作者：前段技术人

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

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 图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Form组件的实现封装杂谈
这篇文章主要介绍了React Form组件的实现封装杂谈，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
ReactHook使用useState更新变量后,如何拿到变量更新后的值
这篇文章主要介绍了ReactHook使用useState更新变量后,如何拿到变量更新后的值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Ant Design 组件库之步骤条实现
这篇文章主要为大家介绍了Ant Design组件库之步骤条实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
详解React Native顶|底部导航使用小技巧
本篇文章主要介绍了详解React Native顶|底部导航使用小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
react redux的原理以及基础使用讲解
这篇文章主要介绍了react redux的原理以及基础使用讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React深入分析更新的创建源码
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数
2023-01-01
浅谈redux以及react-redux简单实现
这篇文章主要介绍了浅谈redux以及react-redux简单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
React虚拟渲染实现50个或者一百个图表渲染
这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
React从react-router路由上做登陆验证控制的方法
本篇文章主要介绍了React从react-router路由上做登陆验证控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
react四种组件中DOM样式设置方式详解
这篇文章主要介绍了react之四种组件中DOM样式设置方式,通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-10-10