首页 > 代码库 > 网页载入进度条中的javascript
网页载入进度条中的javascript
demo地址：http://output.jsbin.com/buquyedosa
思路例如以下：代码都有凝视，就不一一介绍了。
<!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: #abcdef;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
</style>
</head>
<body onprogress="">
<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>
<iframe src="http://tencent.com/" frameborder="0"></iframe>
</body>
</html>网页载入进度条中的javascript
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。