QueryLoader2 技术文档

2024-12-24 11:58:17作者：伍霜盼Ellen

1. 安装指南

使用npm安装

在您的项目中，首先需要通过npm安装QueryLoader2：

npm install queryloader2 --save-dev

使用bower安装

您也可以使用bower来安装QueryLoader2：

bower install queryloader2

2. 项目使用说明

QueryLoader2 的主要功能是在您的网站加载时，通过显示一个覆盖层和加载条来预加载图片。它能够自动检索所有的图片以及背景图片，并在展示网页前预加载它们。

基本用法

在您的网页的 <head> 部分包含 queryloader2.min.js 脚本：

<script src="queryloader2.min.js" type="text/javascript"></script>

创建一个 QueryLoader2 对象，例如：

window.addEventListener('DOMContentLoaded', function() {
    QueryLoader2(document.querySelector("body"), {
        barColor: "#efefef",
        backgroundColor: "#111",
        percentage: true,
        barHeight: 1,
        minimumTime: 200,
        fadeOutTime: 1000
    });
});

使用jQuery

首先在头部包含jQuery和queryloader2.min.js脚本：

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="queryloader2.min.js" type="text/javascript"></script>

然后在 $(document).ready() 中调用 QueryLoader：

$(document).ready(function () {
    $("body").queryLoader2();
});

3. 项目API使用文档

以下为 QueryLoader2 的配置选项：

backgroundColor: 加载器的背景颜色（十六进制）。
barColor: 加载条的颜色（十六进制）。
barHeight: 加载条的高度，单位像素。
minimumTime: 加载必须运行的时间，单位毫秒。即使动画完成，如果没有经过这个时间，它仍然会显示。
maxTime: 加载器的最长时间，单位毫秒。超过这个时间，加载器将自动关闭。
fadeOutTime: 覆盖层淡出所需的时间，单位毫秒。
deepSearch: 如果设置为 true，QueryLoader 会搜索所有选定的元素中的图片。如果您不想让 QueryLoader 检查子元素，请设置为 false。
percentage: 如果设置为 true，将显示百分比。
onComplete: 当加载和动画完成后调用的函数。
onProgress: 当加载一张图片时调用的函数，参数包括 percentage、imagesLoaded 和 totalImages。