前端开发中图片的预加载是一个非常重要的问题，它可以提高网站的访问速度，减少用户等待时间，提升用户体验感。而 npm 包 preloadimg 可以帮助我们实现图片的预加载，减少网站加载时间，提高性能优化。
preloadimg 是什么
preloadimg 是一个 npm 包，它是一个轻量级的前端图片预加载库，可以使用它预加载任何类型的图片，包括 gif、png、jpeg 等图片格式。preloadimg 支持多图片预加载，减少请求次数，同时还可以在图片预加载的过程中提供回调函数，以便处理预加载完成后的操作。
如何安装 preloadimg
安装 preloadimg 只需要用 npm 命令：
npm install preloadimg
如何使用 preloadimg 进行图片预加载
在预加载图片之前，需要先将图片资源引入到 HTML 文件中，如下：
<img src="./img/1.jpg" alt="" /> <img src="./img/2.jpg" alt="" /> <img src="./img/3.jpg" alt="" />
接着，在 JavaScript 中引入 preloadimg：
-- -------------------- ---- -------
------ ---------- ---- -------------
----- ------ - --------------- -------------- --------------- -- --------
----- ------- - --- ------------------ -
----------- ------------ -- -
------------------ ----------------
--
----------------------------- ---------------- -- -
----------------------- -------------------------------------- -----
--
-------- ----- -- -
----------------- ------ ----
-
---
----------------在以上代码中，我们首先定义了图片资源的地址数组 images，然后实例化了 PreLoadImg，传入 images 数组和一些配置参数，其中 onProgress 和 onComplete 是预加载过程中的回调函数，分别表示预加载的进度和完成。 onError 是在预加载过程中出现错误时的回调函数，处理失败情况。
最后调用 start() 方法开始预加载。
preloadimg 的学习和指导意义
preloadimg 只是一个轻量级的前端图片预加载库，但是它在前端开发中有着重要的作用。图片预加载可以大大提高网站的性能和用户的体验感。preloadimg 的使用也很简单，只需要几行代码就可以实现图片的预加载。对于前端开发者来说，熟练掌握 preloadimg 的使用方法，是基础开发技能之一。
示例代码
以下是 preloadimg 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----------
-------
------
---- ----------------- ------ --
---- ----------------- ------ --
---- ----------------- ------ --
------- -------------------------- ---- ---- ---
-------
--------- -------------------- ---- -------
------ ---------- ---- ------------- -- -- ----------
----- ------ - --------------- -------------- --------------- -- --------
----- ------- - --- ------------------ -
----------- ------------ -- -
------------------ ----------------
--
----------------------------- ---------------- -- -
----------------------- -------------------------------------- -----
--
-------- ----- -- -
------------------------------
-
---
---------------- -- -----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055af281e8991b448d89c5