在前端开发过程中，图片是必不可少的资源。但是如果一次性加载所有图片，会增加页面加载时间和带宽占用。为了提高用户体验，我们可以使用懒加载技术来延迟图片的加载。
在 React 中，有一个流行的 npm 包叫做 react-lazy-load，可以方便地实现图片懒加载功能。本文将详细介绍如何使用此包。
安装
首先，使用 npm 安装 react-lazy-load：
npm install react-lazy-load
使用
在组件中引入 LazyLoad 组件，并将要懒加载的图片包裹在其中：
-- -------------------- ---- -------
------ -------- ---- ------------------
-------- ------------- -
------ -
-----
--------- -------------
---- ----------------------- ------- ------ --
-----------
------
--
-这里的 height 属性表示在图片被加载之前，显示的占位符高度。当图片被加载完成后，占位符会自动消失。
进阶用法
除了基本的使用方式，react-lazy-load 还支持许多进阶用法。
Placeholder 组件
可以自定义占位符组件，例如以下代码中的 MyPlaceholder：
-- -------------------- ---- -------
-------- ------------- -
------ -
-----
---------
------------
--------------------------- ---
-
---- ----------------------- ------- ------ --
-----------
------
--
-阈值
可以设置阈值，控制图片何时开始加载。例如以下代码中的 threshold 属性表示当图片距离视窗底部还有 100 像素时开始加载：
-- -------------------- ---- -------
-------- ------------- -
------ -
-----
---------
------------
---------------
-
---- ----------------------- ------- ------ --
-----------
------
--
-回调函数
可以在图片加载完毕后执行回调函数，例如以下代码中的 onLoad 属性：
-- -------------------- ---- -------
-------- ------------- -
----- --------------- - -- -- -
------------------ ----------
--
------ -
-----
---------
------------
------------------------
-
---- ----------------------- ------- ------ --
-----------
------
--
-总结
本文介绍了如何使用 react-lazy-load 包来实现图片懒加载功能，并介绍了一些进阶用法。图片懒加载可以显著提高页面性能和用户体验，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/55074