jQuery 插件创建全屏预加载效果 - fakeLoader.js

版本:

浏览量:1316

最后更新：2021-09-12

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

fakeLoader.js 是一个轻量级的 jQuery 插件，它可以帮助你创建一个带有全屏加载掩码的动画微调器来模拟页面预加载效果。

也可以看看：

10 个最佳加载 Spinner 和 Indicator jQuery 插件
10 个最佳加载 Spinner/Indicator JavaScript 和 CSS 库
80 多个面向前端开发人员的最佳纯 CSS 加载微调器

如何使用它：

1. 在文档中包含 jQuery 库和 jQuery fakeloader 插件的 Javascript 和 CSS。

<link rel="stylesheet" href="css/fakeLoader.css">
 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/fakeLoader.min.js"></script>

2. 为加载微调器创建一个 DIV 元素。

<div class="fakeloader"></div>

3. 在 DIV 元素上调用插件以在页面加载时显示全屏加载微调器。

$(".fakeloader").fakeLoader();

4. 可用选项。

$(".fakeloader").fakeLoader({
 
// Time in milliseconds for fakeLoader disappear
timeToHide:1200,
 
// 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
spinner:"spinner1",//Options:
 
// Background color. Hex, RGB or RGBA colors
bgColor:"#2ecc71",
 
// Custom loading GIF.
imagePath:"yourPath/customizedImage.gif"
             
});