页面预加载loading动画

2018-01-17

前言

打开一个网站时，如果请求速度慢，会造成页面呈现空白状态，这会给用户非常不好的体验。现在可以看到很多的页面都有预加载的效果，加载之前先加载一个生动有趣的动画，后台进程继续加载页面内容。这样的操作使用户几乎没有等待的感觉，提高了用户体验。

fakeLoader

这里介绍一款使用方法非常简单的jQuery插件。

下载地址：https://www.awesomes.cn/repo/joaopereirawd/fakeloader-js

使用方法

（1）HTML

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

（2）引入所需的包

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

<script src="js/jquery-2.2.3.min.js">

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

因为fakeLoader是依赖于jQuery的，所以需要引入jQuery。

（3）初始化

$("#fakeloader").fakeLoader({
    timeToHide:1200, 	//设置loading动画显示的时间
	zIndex:"999",		//设置z-index层级
	spinner:"spinner1",	//这里有[spinner1,spinner2,...,spinner7]7种动画
	bgColor:"#2ecc71", 	//设置背景颜色
	imagePath:"yourPath/customizedImage.gif"  //也可以使用GIF图来代替spinner
});

注意：不能设置bgColor 为白色，因为spinner的颜色也为白色，这样打开页面就是空白页面，看不出动画效果。如果需求就是背景颜色为白色的话，可以自己在样式中设置spinner的颜色，覆盖默认颜色。

完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/fakeLoader.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/fakeLoader.min.js"></script>
    <style>
        #fakeLoader .fl .rect1,
        #fakeLoader .fl .rect2,
        #fakeLoader .fl .rect3,
        #fakeLoader .fl .rect4,
        #fakeLoader .fl .rect5 {
            background: #000;
        }
    </style>
</head>
<body>
<div id="fakeLoader"></div>
</body>
<script type="text/javascript">
    $("#fakeLoader").fakeLoader({
        zIndex: 999,
        spinner: 'spinner6',
        bgColor: '#fff',
    });
</script>
</html>

实现的效果如图所示：