页面预加载特效插件

2019年1月25日15:59:11 评论 347

为了提升WEB网站的用户体验，有的时候，页面在预加载时需要显示一个提示正在加载中的预加载图标，等页面完全加载完之后预加载图标消失。Fakeloader插件可以很好地实现这一功能，本文简单介绍Fakeloader插件的使用方法。

Fakeloader页面加载效果代码，支持7种效果和自定义图片，兼容主流浏览器！

下载地址

使用方法：

1、body中插入以下html代码

1
<div id="fakeLoader"></div>

2、head标签里嵌入

1
<link rel="stylesheet" href="css/fakeloader.css">

3、引入js库

1
2
<script src="js/jquery.min.js">
<script src="js/fakeloader.min.js">

4 调用fakeloader

1
2
3
<script type="text/javascript">
    $(".fakeloader").fakeLoader();
</script>

5 选项解释

1
2
3
4
5
6
7
$(".fakeloader").fakeLoader({
    timeToHide:1200, //加载效果的持续时间
    zIndex:"999",//
    spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果
    bgColor:"#2ecc71", //加载时的背景颜色
    imagePath:"yourPath/customizedImage.gif" //自定义的加载图片，见demo8.html
});

最后更新：2019-09-12
weinxin
关于本站
本站是一个分享建站经验、SEO优化、互联网技术以及日常生活的个人生活博客。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: