QueryLoader2 技术文档

2024-12-24 04:14:01作者：伍霜盼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。

4. 项目安装方式

请参考上述的“安装指南”部分来获取通过npm或bower安装QueryLoader2的详细信息。

登录后查看全文

QueryLoader2 技术文档

1. 安装指南

使用npm安装

使用bower安装

2. 项目使用说明

基本用法

使用jQuery

3. 项目API使用文档

4. 项目安装方式

最新内容推荐

项目优选

QueryLoader2 技术文档

1. 安装指南

使用npm安装

使用bower安装

2. 项目使用说明

基本用法

使用jQuery

3. 项目API使用文档

4. 项目安装方式

相关内容推荐

最新内容推荐

项目优选