Metronic 是一套精美的响应式后台管理模板，基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76…
May 11, 2015
如何用 javascript 做一个高逼格的进度条
可能你发现了本站顶部的进度条，它是如何实现的呢？下面一起来看。
页面进度条展示的是资源下载的进度，通常在页面上加上进度条，可以缓解用户的等待焦虑，也提升了网站的逼格。
前端进度条实现
在前端，实现网页的进度条目前还没有一个比较精确的方案，都是一些模拟进度。即页面打开的时候是 1%，然后定时器增加进度到 99%，然后 window.onload 之后，进度跑到 100%。
在前端，ajax 资源的上传和下载，html5 中都可以获取进度的，此文不谈。
实现准备
html 文件
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body ontouchstart="">
</body>
</html>
先写一个进度条 div，放在body最前面。
<div class="progress">
<div class="progress-inner" id="progress"></div>
</div>
在写样式：
<style>
.progress{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 20px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.progress-inner{
width: 0;
background: #d43f3a;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
</style>
为了显示进度，还需要添加几个 iframe：
<iframe src="http://baidu.com/" frameborder="0"></iframe> <iframe src="http://163.com/" frameborder="0"></iframe> <iframe src="http://qq.com/" frameborder="0"></iframe>
脚本
接下来开始写脚本，将进度条展示的脚本写在页面的最顶部，保证它是最先运行的，这样进度条才更加真实。
<script>
(function () {
// 获取进度条 div
var $progress = document.getElementById('progress');
// 初始进度，1%
var progress = 1;
// 生成随机数
var random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
// 跑进度
var onprogress = function () {
// 随机时间
var timeout = random(10, 30);
setTimeout(function () {
// 如果页面加载完毕，则直接进度到 100%
if(window.loaded){
$progress.style.width = '100%';
return;
}
// 随机进度
progress += random(1, 5);
// 随机进度不能超过 98%，以免页面还没加载完毕，进度已经 100% 了
if(progress > 98){
progress = 98;
}
$progress.style.width = progress + '%';
onprogress();
}, timeout);
};
// 开始跑进度
onprogress();
window.onload = function(){
window.loaded = true;
};
})();
</script>
完整的内容
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>进度条</title>
<style>
.progress{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 20px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.progress-inner{
width: 1%;
background: #d43f3a;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
</style>
</head>
<body ontouchstart="">
<div class="progress">
<div class="progress-inner" id="progress"></div>
</div>
<script>
(function () {
// 获取进度条 div
var $progress = document.getElementById('progress');
// 初始进度，1%
var progress = 1;
// 生成随机数
var random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
// 跑进度
var onprogress = function () {
// 随机时间
var timeout = random(10, 30);
setTimeout(function () {
// 如果页面加载完毕，则直接进度到 100%
if(window.loaded){
$progress.style.width = '100%';
return;
}
// 随机进度
progress += random(1, 5);
// 随机进度不能超过 98%，以免页面还没加载完毕，进度已经 100% 了
if(progress > 98){
progress = 98;
}
$progress.style.width = progress + '%';
onprogress();
}, timeout);
};
// 开始跑进度
onprogress();
window.onload = function(){
window.loaded = true;
};
})();
</script>
<iframe src="http://baidu.com/" frameborder="0"></iframe>
<iframe src="http://163.com/" frameborder="0"></iframe>
<iframe src="http://qq.com/" frameborder="0"></iframe>
</body>
</html>
Related Posts
About Author
