react实现图片懒加载的三种方式
更新时间：2025年03月10日 09:26:45 作者：前段技术人
本文主要介绍了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 图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
React如何使用create-react-app创建react项目
这篇文章主要介绍了React如何使用create-react-app创建react项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下2021-06-06
这篇文章主要介绍了浅谈React碰到v-if,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了React Hooks闭包陷阱的深入探究，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本篇文章主要介绍了用React实现一个完整的TodoList的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Jotai是一个简单、灵活、高效的React状态管理库,通过原子和派生状态的设计,使得状态管理变得直观和高效,它适用于小型应用、组件库和大型项目的局部状态管理,且与TypeScript兼容,Jotai的社区正在壮大,提供了丰富的资源和支持,感兴趣的朋友跟随小编一起看看吧2024-11-11
在React应用中,组件间的通信是一个基础而关键的概念,理解和掌握不同组件之间的通信方式,可以帮助我们构建出更加模块化、可维护和可扩展的应用程序,React提供了多种组件通信的方法,本文给大家详细的介绍了这些方法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了React如何配置src根目录@,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2024-01-01
最新评论