使用fakeLoader.js创建页面加载动画

原创文章作者：月光光 2015年06月24日 16:41helloweba.com 标签：jQuery

fakeLoader.js是一个轻量级的jQuery插件，它可以帮助我们创建一个全屏的加载过渡动画，当页面加载时，显示加载动画，当页面内容加载完成后动画消失显示页面内容。

我们只需要在<body>的第一行加入以下代码。

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

然后在<head>里载入css样式文件。

<link rel="stylesheet" href="css/fakeLoader.css">

别忘了加载jQuery库文件以及fakeLoader.js。

<script src="js/jquery.js"></script>
<script src="js/fakeLoader.min.js"></script>

然后在</body>的上一行加入以下代码：

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

以上代码就是调用了fakeLoader.js插件，该插件还提供了以下选项设置。

timeToHide：过渡加载动画时间，毫秒，默认1200。

spinner：动画效果，有7个值可选： 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'，默认值：spinner1。

bgColor：过渡遮罩层背景色，默认："#2ecc71"。

imagePath：自定义过渡动画图片。

声明：本文为原创文章，helloweba.net和作者拥有版权，如需转载，请注明来源于helloweba.net并保留原文链接：https://www.helloweba.net/javascript/310.html

共5条评论

WEB技术分享