介绍
queryloader2 是一个轻量级的 JavaScript 库，它能够在页面加载时显示一个加载进度条，并在所有资源都加载完成后隐藏它。这个库非常适合用于展示网站的预加载效果，增强用户体验。
安装
你可以通过 npm 来安装 queryloader2：
npm install queryloader2 --save
使用方法
HTML
首先，在你的 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
------- ---------------------------------
------- -------------------------------------------
----- ---------------- --------------------------------
-------
------
---- ---- ------- ------- ---- ---- ---
---- --- ---- ---- -- ---- ---- ---
---- ---------------------
---- -----------------
-------
-------这段 HTML 代码会在页面上创建两个元素：#qLoverlay 和 #qLbar。#qLoverlay 是用来遮罩整个页面，而 #qLbar 是用来显示进度条的。
JavaScript
然后，在你的 JavaScript 文件中添加以下代码：
-- -------------------- ---- -------
---------------------------- -
------------------------
--------- ----------
---------------- ----------
----------- -----
---------- --
------------------ -------
------------ ----
---
---这段 JavaScript 代码会在页面加载完成后自动运行。它会调用 queryLoader2 函数，并把参数传递给它。这些参数可以用来控制进度条的外观和行为。
参数
以下是 queryLoader2 函数可接受的所有参数：
barColor: 进度条的颜色（默认值：#007aff）。backgroundColor: 进度条背景颜色（默认值：#f5f5f5）。percentage: 是否显示百分比（默认值：true）。barHeight: 进度条高度（默认值：3）。minimumTime: 最短显示时间（默认值：1000）。onLoadComplete: 加载完成后的回调函数（默认值：null）。completeAnimation: 完成加载后的动画类型（默认值：fade，也支持grow和none）。
示例代码
下面是一个完整的 HTML 文件，其中包含了 queryloader2 的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
----- ---------------- -------------------------------------------------------
-------
------
----------- -- -- ------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- --- ------ ----- ------- -- ----- ---------- -------- ----- ----- -------- ---- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- ------ -- ---- -------- ----------- ---- ---- ------- ----- -------- ------- ------ - ------- ------- --------- --------- -------- ------- -- --------- ------ ------------ --- ------- ---- --------- ------ ----- ----- -- ----- ------- ------ -- --- -------
-------- --------- ---- ------ ---- --- ------ ---------- -- ------- ----- ------- --- ------- ----- ----- --- ------- ------ --------- --- --- ---- ------ ------ ------------ --- ---- ----- ---- ----- --------- ----- --- --------- ---------- -- --------- ----- --- ---- ------- -- -------- ---- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------