背景
前端开发中，我们经常需要在页面中加载图片。然而，由于网络环境和图片大小等因素，有时候图片未能及时加载就导致页面出现空白或者图片的尺寸计算出现问题。为了解决这个问题，我们可以在图片加载完成后再进行相关操作，而这个时候，就需要使用一个检测图片是否加载完成的工具。
本文将介绍 npm 包 @linc.world/react-images-loaded，它是一个轻量级的 React 组件，专门用于检测图片是否加载完成，并在图片加载完成后触发相关操作，比如设置容器高度以保证页面布局正确。
安装
首先，我们需要在项目中安装 @linc.world/react-images-loaded 这个 npm 包，可以使用 npm 或者 yarn 进行安装，具体命令如下：
npm install @linc.world/react-images-loaded // or yarn add @linc.world/react-images-loaded
安装完成后，我们就可以在项目中引入 @linc.world/react-images-loaded 这个组件，然后在需要检测图片加载完成的容器组件中使用它。
使用
@linc.world/react-images-loaded 组件的使用非常简单，只需要在需要检测图片加载完成的容器组件中引入它，并把需要监测的图片的 src 属性作为 props 传递给它即可。组件会在所有指定的图片都加载完成后触发 onLoaded 函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------------------------
-------- ---------------- -
----- -------------- ---------------- - ----------------------
----- -------------- - -- -- -
----------------------
--
------------------ -- -
---------------- ------ --- -------------- - -------- - ---- -----------
-- ----------------
------ -
------------- --------------------------
---- ------------------------------------- ----------------- --
---- ------------------------------------- ----------------- --
---------------
--
-在上面的例子中，我们首先引入了 @linc.world/react-images-loaded 组件，并在 ImageContainer 函数中使用了它。我们使用了 useState 钩子来存储图片是否加载完成的状态，并在所有图片都加载完成后调用 handleOnLoaded 函数来设置 imagesLoaded 状态为 true。
在 ImagesLoaded 组件中，我们把需要检测的两张图片的 src 属性作为 children 传递给了它。当这两张图片都加载完成后，onLoaded 函数就会被触发，然后我们在 useEffect 钩子中打印了 imagesLoaded 的值。
参数
@linc.world/react-images-loaded 组件支持一些额外的参数，让你可以更好地控制图片的加载过程。
doneClassName
指定在所有图片都加载完成后所添加的 className。该参数可以让你在所有图片都加载完成后对容器组件进行一些特殊的样式处理。
-- -------------------- ---- -------
-------- ---------------- -
----- -------------- ---------------- - ----------------------
----- -------------- - -- -- -
----------------------
--
----- ------------- - ------------ - -------- - ---
------ -
------------- ------------------------- ------------------------------
---- ------------------------------------- ----------------- --
---- ------------------------------------- ----------------- --
---------------
--
-在上面的例子中，我们通过 useState 钩子来存储图片是否加载完成的状态，并在所有图片都加载完成后调用 handleOnLoaded 函数来设置 imagesLoaded 状态为 true。
然后，我们使用了 imagesLoaded 状态来控制 doneClassName 参数的值，该值为 "loaded" 当图片加载完成时，否则为空。通过 doneClassName 参数，我们可以在所有图片都加载完成后对容器组件进行一些特殊样式的处理。
loadingClass
指定在加载图片过程中添加的 className。该参数可以让你在图片加载过程中对容器组件进行一些特殊的样式处理。
-- -------------------- ---- -------
-------- ---------------- -
----- ------------ - ----------
------ -
------------- ----------------------------
---- ------------------------------------- ----------------- --
---- ------------------------------------- ----------------- --
---------------
--
-在上面的例子中，我们通过 loadingClass 参数指定了在图片加载过程中添加的 className。容器组件可以利用这个参数来展示一个加载中的状态。
count
指定需要加载的图片数量。该参数可以让你指定需要加载多少张图片后触发 onLoaded 回调函数。
-- -------------------- ---- -------
-------- ---------------- -
----- -------------- - -- -- -
---------------- ------ --- ---------
--
------ -
------------- --------- --------------------------
---- ------------------------------------- ----------------- --
---- ------------------------------------- ----------------- --
---------------
--
-在上面例子中，我们通过 count 参数指定了需要加载的图片张数为 2 张，当这两张图片都加载完成后，onLoaded 回调函数就会被触发。
结语
@linc.world/react-images-loaded 是一个非常好用的 npm 包，可以帮助我们解决页面中图片加载不完整或尺寸计算错误的问题。本文介绍了如何安装和使用它，以及介绍了一些常用的参数。希望通过本文的介绍，你能更好地使用 @linc.world/react-images-loaded 来提升前端开发的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38c4