进度条的实现
学习自： 这个网站
原理：
在 一个页面中一般分为: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>
网友评论