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将组件作为参数进行传递的3种方法实例
其实react组件之间传递参数是比较简单的,组件传入参数的一种方式,下面这篇文章主要给大家介绍了关于React将组件作为参数进行传递的3种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
React Fiber源码深入分析
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
2022-11-11
Redux saga异步管理与生成器详解
这篇文章主要介绍了Redux saga异步管理与生成器，工作中使用了redux-saga这个redux中间件，如果不明白内部原理使用起来会让人摸不着头脑，阅读源码后特意对其原理做下总结
2023-02-02
插件化机制优雅封装你的hook请求使用方式
这篇文章主要为大家介绍了插件化机制优雅封装你的hook请求使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React如何实现视频旋转缩放
这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-11-11
react native基于FlatList下拉刷新上拉加载实现代码示例
这篇文章主要介绍了react native基于FlatList下拉刷新上拉加载实现代码示例
2018-09-09
React Hooks项目中使用IDB 8.x的实现
IDB8.x是IndexedDB的轻量级封装库,提供基于Promise的简洁API,结合React Hooks可实现高效、可靠的客户端数据存储,本文就来介绍一下React Hooks项目中使用IDB 8.x的实现,感兴趣的可以了解一下
2025-09-09
ReactNative踩坑之配置调试端口的解决方法
本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
React中项目路由配置与跳转方法详解
这篇文章主要为大家详细介绍了React中项目路由配置与跳转方法的相关资料，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下
2023-08-08
React实践之Tree组件的使用方法
本篇文章主要介绍了React实践之Tree组件的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09