在前端开发中，加快网站加载速度是一个非常重要的需求。而在实现这个需求的过程中，很多前端工程师会使用到轻量级的图片预加载插件—— lighter-load。
lighter-load 是一个基于 Promise 的轻量级图片预加载插件，它的整个代码只有 2KB 左右。使用 lighter-load 插件可以帮助我们实现网站图片的预加载，达到加速网站加载的目的。
lighter-load 的安装与引入
要使用 lighter-load，首先需要进行安装。可以通过 NPM 进行安装：
npm install lighter-load --save
或者通过 yarn 进行安装：
yarn add lighter-load
安装完成后，我们就可以在项目中使用 lighter-load。要使用 lighter-load，可以通过以下方式引入：
import lighterLoader from 'lighter-load';
这里我们使用 ES6 的 import 语法进行引入。当然，你也可以使用 CommonJS 的方式进行引入。
使用 lighter-load 进行图片预加载
当 lighter-load 安装并引入成功后，我们就可以开始使用 lighter-load 进行图片预加载了。
使用 lighter-load 进行图片预加载非常简单，只需要调用 lighter-load 的 loadImages 方法即可，如下所示：
-- -------------------- ---- -------
-- ------------------
--------------------------
----------------------------------
----------------------------------
---------------------------------
------------------ -
---------------- ------ ------ ---------------
------------------- -
------------------- -- ---- --- -- ---- ---------
---
-- ------------------
--------------------------
--------- ----------------------------------
--------- ----------------------------------
--------- ---------------------------------
------------------ -
---------------- ------ ------ ---------------
------------------- -
------------------- -- ---- --- -- ---- ---------
---如上所示，我们可以通过传入数组或对象的方式来传入需要预加载的图片URL。loadImages 方法返回一个 Promise 对象，使用 then 和 catch 分别处理加载成功和加载失败的情况。
lighter-load 的传入参数
除了可以传入需要预加载的图片 URL 以外，lighter-load 还支持传入其他的加载参数，包括加载超时时间（timeout）、重试次数、以及加载完成后回调函数等。
比如，在下面的示例中，我们设置了加载超时时间为 5000 毫秒、重试次数为 3 次，并在图片加载完成后调用了一个回调函数：
-- -------------------- ---- -------
--------------------------
--------- ----------------------------------
--------- -
---- ----------------------------------
-------- ---------- -
------------------ - ------ ---------------
--
------ ---------- -
------------------ - ------ -- -------
-
--
--------- ---------------------------------
-- -
-------- -----
------ --
----------- ---------- -
---------------- ------ ------ ---------------
-
------------------- -
----------------- ------ ------ -- -------
---总结
本文介绍了如何安装、引入和使用 lighter-load，包括传入参数的使用等。使用 lighter-load 可以帮助我们实现图片的预加载，加速网站加载，提高用户体验。
在使用 lighter-load 时，我们可以根据实际需求，自定义传入参数，以更好地满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76785