进度条的实现
学习自: 这个网站
原理:
在 一个页面中一般分为:header,content,sidebar,footer,每次我们访问页面时,浏览器发送请求,肯定要花费一定的时间的,以进度条的宽度来实现加载时间的变化
在header时,让进度条显示宽度,10%,
加载content时,让进度条显示一定的宽度,50%,
sidebar 70%,
footer 100%
就是这样,动画函数使用jquery的animate(),
最后,页面加载完成,使用fadeout()淡出 让进度条消失就可以了.
html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<div class="loading"></div>
<header>header</header>
<div class="loading"></div>
<div class="content">some data</div>
<div class="loading"></div>
<div class="sidebar"></div>
<div class="loading"></div>
<footer><footer>
</body>
</html>
然后给每个loading div 加样式
.loading {
background: #FF6100;
height: 5px;
position: fixed;
top: 0;
z-index: 99999;}
引入 jquery
<script src="jquery-2.1.4.min.js"></script>
加上 jquery代码
$ (".loading").animate ({"width": "10%"}, 50);
$ (".loading").animate ({"width": "50%"}, 50);
$ (".loading").animate ({"width": "70%"}, 50);
$ (".loading").animate ({"width": "100%"}, 50);
$ (function () {
$(".loading").fadeOut();
});
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
.loading {
background: #FF6100;
height: 5px;
position: fixed;
top: 0;
z-index: 99999;
}
</style>
</head>
<body>
<div class="loading"></div>
<header>header</header>
<div class="loading"></div>
<div class="content">some data</div>
<div class="loading"></div>
<div class="sidebar"></div>
<div class="loading"></div>
<footer><footer>
<script src="jquery.js"></script>
<script>
$ (".loading").animate ({"width": "10%"}, 50);
$ (".loading").animate ({"width": "50%"}, 50);
$ (".loading").animate ({"width": "70%"}, 50);
$ (".loading").animate ({"width": "100%"}, 50);
$ (function () {
$(".loading").fadeOut();
});
</script>
</body>
</html>