在现代 Web 开发中，前端工程师需要经常加载图片并进行相关的操作。npm 包 load-img 就是一个非常好用的图片加载工具，它可以简化图片加载的过程并提高用户体验。本文将为大家介绍如何使用 load-img。
安装
在开始使用 load-img 之前，需要在项目中安装它。可以使用 npm 进行安装：
npm install load-img --save
或者使用 yarn 进行安装：
yarn add load-img
基本用法
使用 load-img，首先需要引入它：
import loadImg from 'load-img';
然后，就可以通过调用 loadImg 函数来进行图片加载：
loadImg('path/to/image.jpg')
.then(img => {
console.log(img.width, img.height);
})
.catch(err => {
console.error(err);
});上面的代码中，loadImg 函数返回的是一个 Promise 对象，当加载成功时则会传递一个已加载完成的 Image 对象，否则会抛出一个错误。
高级用法
load-img 提供了一些高级用法，以增强其功能。
加载多张图片
load-img 同样可以加载多张图片：
-- -------------------- ---- -------
----- ------ - -
---------------------
---------------------
--------------------
--
------------------------------------------ -- -
---------------- -- -
---------------------- ------------
---
---上面的代码中，我们把所有的图片路径放到了一个数组中，然后使用 Promise.all 方法来并行加载所有的图片。当所有图片加载完成时，Promise.all 的结果是一个 Image 对象的数组，我们可以遍历它来获取每一个图片的信息。
加载响应式图片
在开发响应式网站时，经常需要根据设备的分辨率加载不同尺寸的图片，以提高页面的加载速度。load-img 通过传递一个包含多个 URL 的数组，可以轻松地实现这个功能：
-- -------------------- ---- -------
----- ------ - -
-
---- --------------------------
------ ------------ --------
----------- ------
--
-
---- ---------------------------
------ ------------ --------
----------- ------
--
-
---- --------------------------
------ ------------ --------
----------- -------
-
--
----- ------ - ---------------- -- -
------ ------------- ---------------------
-------------
----- ----- - --------
---------
-------
-----
----------- -- -
---------------------- ------------
---上面的代码中，我们创建了一个包含多个 URL 的数组，每个 URL 都对应一张图片，以及这张图片在哪些条件下应该被加载（比如设备分辨率）。然后，我们将这个数组转换为一个 srcset 字符串，srcset 属性用于指定响应式图片应该加载的不同 URL。最后，我们传入 srcset 和 sizes 值到 loadImg 函数中，以加载这些响应式图片。
总结
本文介绍了 load-img 的基本用法以及一些高级用法，包括加载多张图片和加载响应式图片。使用 load-img，可以轻松地进行图片加载，提高用户体验。希望这篇教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64480