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;

優(yōu)點：

簡單易用，無需額外的庫。
瀏覽器原生支持，兼容性較好。

缺點：

對于舊版本的瀏覽器可能不支持。

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（觸發(fā)加載的閾值）、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;

優(yōu)點：

功能豐富，提供了多種配置選項。
兼容性好，支持舊版本的瀏覽器。

缺點：

需要引入額外的庫，增加了項目的體積。

3. 使用 IntersectionObserver API 手動實現

IntersectionObserver 是一個原生的 JavaScript API，用于觀察目標元素與視口的交叉狀態(tài)。可以利用它手動實現圖片懶加載。

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;

優(yōu)點：