简介
在前端开发中，经常需要使用图片资源。有时我们需要了解这些图片资源的加载情况，以便进行优化。常用的方式是使用浏览器自带的开发者工具查看每个资源的加载时间。但是，如果有上千张甚至更多的图片需要加载时，手工逐一查看就显得很麻烦。
这时就需要使用一个工具，来帮我们快速完成这项任务。npm 包 imgping 就是一个优秀的工具，它可以通过 ping 的方式来获取图片加载时间，以帮助我们进行优化。
使用教程
安装
在命令行中输入以下命令安装 imgping：
--- ------- -------
引入
在需要使用 imgping 的页面中引入该包：
------ ------- ---- ----------
使用
使用 imgping 很简单，只需要调用它提供的方法：
--------------------------------------------- ------ -- - ------------------ ------ -- ------------ ---
上面的代码会试图加载 https://example.com/image.png，加载成功后会调用回调函数，并将加载时间作为参数传入。
当然，单张图片的加载速度不会很慢。imgping 的真正威力体现在同时加载多张图片时。我们可以将多个 ping 请求并行发出，然后等待所有请求完成后再进行处理：
----- ------ - -
---------------------------------
---------------------------------
---------------------------------
-- ---
--
------------
-----------
------- --
--- ----------------- -- -
------------------- ------ -- -
--------------
---
--
-
-------------- -- -
---------------- ------ ------ -- --------------------------
---上面的代码并行发出了多个 ping 请求，并使用 Promise.all 等待它们全部完成。完成后，它会输出所有图片中最慢的加载时间。
高级使用
除了上面介绍的基本使用方式外，imgping 还提供了一些高级用法，可以让我们更加灵活地使用它。
配置项
imgping 可以通过传入一个配置对象，来使用一些高级功能。具体包括：
timeout: 超时时间，单位为毫秒。如果加载图片的时间超过这个值，则认为加载失败。默认值为 3000 毫秒。count: 并发数量。可以指定同时最多有几个请求在运行，默认值为 5。
----- ------ - - -------- ----- ------ --- -- --------------------------------------------- ------ -- - ------------------ ------ -- ------------ -- --------
取消请求
如果某个请求出现了问题，我们可以手动将其取消：
----- ------- - --------------------------------------------- ------ -- - ------------------ ------ -- ------------ --- -- ---- -----------------
示例代码
下面是一个完整的使用示例：
------ ------- ---- ----------
----- ------ - -
---------------------------------
---------------------------------
---------------------------------
-- ---
--
----- ------ - -
-------- -----
------ ---
--
------------
-----------
------- --
--- ----------------- -- -
----- ------- - ------------------- ------ -- -
--------------
-- --------
------------- -- -
-----------------
------------
-- ----------------
--
-
-------------- -- -
----- ------------ - ------------------- -- ---- --- ----
-- -------------------- --- -- -
----------------- ------ ------ -- -------
- ---- -
---------------- ------ ------ -- ---------------------------------
-
---该示例的作用是同时加载多张图片，并输出加载最慢的那张图片的加载时间。在请求时间过长或者请求失败的情况下，会将其剔除，最后输出成功加载的图片中最慢的加载时间。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005553f81e8991b448d2745