前言
在不少前端应用中，页面的加载速度往往是用户体验的重要因素之一。为了让用户尽快看到页面内容，我们可以使用预加载技术，将必要的资源提前加载到浏览器缓存中。而 npm 包 prelodr 就是一个非常方便实用的预加载库。
安装
首先需要安装 prelodr，可以通过 npm 进行安装：
--- ------- ------- ------
使用方法
初始化
------ --------- ---- ---------- ----- --------- - --- ------------
添加资源
--------------- ---------------------- ---------------------- --------------------- -------------------- ---
加载资源
----------------
-------- -- -
---------------- --------- ----------
--
------------ -- -
------------------ ------- ------------ -----
---API
add(resources: string | string[]): void
添加资源，参数可以是单个路径或路径数组。
load(): Promise<void>
开始加载资源，返回一个 Promise 对象，当所有资源都被加载完成时 resolve，否则 reject。
onProgress(callback: (progress: number, total: number) => void): void
设置加载进度回调函数，第一个参数是已经加载的资源数量（0 <= progress <= total），第二个参数是需要加载的总资源数量。
onError(callback: (error: any) => void): void
设置加载错误回调函数，在加载出错时触发，参数为错误对象。
示例
以下示例演示了如何使用 prelodr 进行图片的预加载，并在加载完成后将图片添加到页面中。
--------- -----
------
------
-------------- ------------
-------
--- -
-------- -----
-
--------
-------
------
---- ------------------------- -------
---- ------------------------- -------
---- ------------------------- -------
------- --------------------------
-------
------------- --------- ---- ----------
----- ------ - ---------------------------------
----- --------- - ------------------------------ -- -----------
----- --------- - --- ------------
-------------------------
------------------------------- ------ -- -
------------------- ----------- -- -------- ---------
---
----------------
-------- -- -
---------------- ------ ----------
---------------------- -- -
------------------- - --------
---
--
------------ -- -
------------------ ------- --------- -----
---总结
prelodr 是一个简单易用的 npm 包，可以帮助我们方便地进行资源预加载。通过本文的介绍，读者可以掌握 prelodr 的基本使用方法，并可以根据自己的需要进行更加复杂的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/38795