QueryLoader2 技术文档

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

Version of the QueryLoader by Gaya Kessler. Preload images with ease.

项目地址：https://gitcode.com/gh_mirrors/qu/queryloader2

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的详细信息。

Version of the QueryLoader by Gaya Kessler. Preload images with ease.

项目地址：https://gitcode.com/gh_mirrors/qu/queryloader2

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

flutter_flutter

Oohos_react_native

React Native鸿蒙化仓库

昇腾LLM分布式训练框架

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统