实现页面的加载
页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；晦涩是因为web的特性，各种零散资源决定它很难是“真实”的进度，只能是一种“假”的进度，至少在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。
所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验，使用户不至于在打开页面之后长时间面对一片空白，导致用户流失。
既然是“假”的，我们就要做到“仿真”才有用。仿真是有意义的，事实上用户并不在乎某一刻你是不是真的加载到了百分之几，他只关心你还要load多久。所以接下来我们就来实现一个页面加载进度loading。
完整的代码如下，你可以直接拷贝出来运行。
<!DOCTYPE html>
<html>
<head>
<title>页面loading</title>
<style type="text/css">
.loading {
display: table;
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background-color: #fff;
z-index: 5;
}
.loading .progress {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="loading" id="loading">
<div class="progress" id="progress">0%</div>
</div>
<script type="text/javascript">
var $loading = document.getElementById("loading");
var $progress = document.getElementById("progress");
var prg = 0;
var timer = 0;
progress([80,90],[1,3],100);
window.onload = function(){
progress(100,[1,5],10,function(){
window.setTimeout(function(){
$loading.style.display = "none";
},1000);
})
}
function progress (dist, speed, delay, callback) {
var _dist = random(dist);
var _speed = random(speed);
var _delay = random(delay);
window.clearTimeout(timer);
timer = window.setTimeout(function(){
if(prg + _speed >= _dist){
window.clearTimeout(timer);
prg = _dist;
callback && callback();
}else{
prg += _speed;
progress(_dist,speed,delay,callback);
}
$progress.innerHTML = parseInt(prg) + "%";
console.log(prg);
},_delay);
}
function random (n){
if(typeof n === 'object'){
var times = n[1]-n[0];
var offset = n[0];
return Math.random()*times + offset;
}else{
return n;
}
}
</script>
</body>
</html>
参考文章：http://www.cnblogs.com/likar/p/6247951.html
我的个人网站页面就是使用自己整理的这代码进行加载的。我的网站地址为：https://reng99.github.io/ 【为了更好的体验，请使用谷歌浏览器打开。首次打开加载有些慢，请耐心等待，后期想办法优化哈】