fakeLoader.js 安装与使用教程

2026-01-17 08:27:15作者：廉皓灿Ida

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

项目地址：https://gitcode.com/gh_mirrors/fa/fakeLoader.js

1. 项目目录结构及介绍

在 fakeLoader.js 的源码中，主要的目录结构包括：

.
├── css/         # 存放样式文件
│   ├── fakeLoader.min.css  # 样式库的压缩版
├── demo/        # 示例代码和页面
├── dist/        # 发布的 JavaScript 文件
│   ├── fakeLoader.min.js  # 主库的压缩版本
├── js/          # JavaScript 源文件
└── scss/        # SASS 源文件，用于编译 CSS

css: 包含已经编译好的 CSS 样式文件。
demo: 提供一个简单的示例页面来展示 fakeLoader.js 的效果。
dist: 存储发布时的压缩过的 JavaScript 库文件。
js: 存放未压缩的 JavaScript 源代码。
scss: 使用 SASS 编写的原始 CSS 源文件。

2. 项目启动文件介绍

由于 fakeLoader.js 是一个基于 jQuery 的插件，所以没有独立的 "启动" 文件。要使用它，你需要引入 jQuery 和 fakeLoader.min.js 到你的 HTML 页面中。然后，你可以通过调用 $().fakeLoader() 来初始化插件。

以下是一个基础的 HTML 结构，展示了如何加载所需的资源并初始化 fakeLoader.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fakeLoader.js 示例</title>
    <!-- 引入 jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入 fakeLoader.js CSS -->
    <link rel="stylesheet" href="/path/to/node_modules/dist/fakeLoader.min.css">
    <!-- 引入 fakeLoader.js JavaScript -->
    <script src="/path/to/node_modules/dist/fakeLoader.min.js"></script>
</head>
<body>
    <!-- 在文档中添加 fakeLoader 的占位符 -->
    <div class="fakeLoader"></div>

    <!-- 初始化 fakeLoader -->
    <script>
        $(document).ready(function () {
            $('.fakeLoader').fakeLoader();
        });
    </script>
    
    <!-- 其他页面内容 -->
    ...
</body>
</html>

请注意替换 /path/to/node_modules/dist 为实际的文件路径。

3. 项目的配置文件介绍

fakeLoader.js 不依赖于配置文件，但它允许通过方法调用来设置一些选项。这些选项可以在初始化插件时传递给 .fakeLoader() 函数，例如：

$('.fakeLoader').fakeLoader({
    timeToHide: 3000,   // 控制加载动画消失的时间（毫秒）
    spinner: 'spinner3', // 设置加载图标样式
    bgColor: '#000'     // 背景颜色
});

可用的配置项包括：

timeToHide: 动画隐藏前的持续时间（默认值是 3000 毫秒）。
spinner: 选择加载动画的样式，默认为 'spinner1'，可以选择 'spinner2', 'spinner3', 等等。
bgColor: 加载遮罩背景色，可以是任何有效的 CSS 颜色值。

以上就是关于 fakeLoader.js 插件的基本安装和使用教程。更多信息可参考项目官方文档。

fakeLoader.js