进度条方案——精选推荐

进度条⽅案
说起⽤户体验，不得不提到进度条，加载页⾯时给⽤户提供⼀个实时的进度显⽰将⼤⼤降低页⾯加载过慢导致的⽤户流失，这次总结下⼏个常见的进度条实现⽅案。

1. 定时器加载loading.gif，⼤概估算页⾯加载时间，隐藏loading；
2. ⼀开始显⽰loading.gif，页⾯加载完成时隐藏loading.gif
/*
⽂档状态document.readyState:
loading：加载html阶段，尚未完成解析时
interactive：html⽂档解析完成，加载外部资源阶段时
complete：加载完成时
*/
var loading = document.getElementById('loading');
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
loading.style.display = 'none';
}
}
⼏种事件的执⾏顺序
// 测试显⽰执⾏顺序为onreadystatechange -> onready -> DOMContentLoaded -> onload
window.onload = function(){
console.log(document.readyState+'(onload)');
}
document.addEventListener('DOMContentLoaded', function(){
console.log(document.readyState+'(DOMContentLoaded)');
})
document.onready = function(){
console.log(document.readyState+'(onready)');
}
document.onreadystatechange = function(){
console.log(document.readyState+'(onreadystatechange)');
}
3. css实现loading动画
/* 新的属性要加上浏览器前缀 */
<style>
.loading{
width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;
}
.pic{
width: 60px;height: 60px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}
i{
display: block;float:left;width: 6px;height: 60px;background: #399;margin: 0 2px;transform: scaleY(0.4);animation: load 1.3s infinite;
}
i:nth-child(2){animation-delay: 0.1s;}
i:nth-child(3){animation-delay: 0.2s;}
i:nth-child(4){animation-delay: 0.3s;}
i:nth-child(5){animation-delay: 0.4s;}
@keyframes load{
0%,40%,100%{transform: scaleY(0.4)}
20%{transform: scaleY(1)}
}
</style><div class='loading'>
<div class='pic'>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
4. 顶部loading进度条：
可以将 ’ <script>改变顶部进度宽度</script> ’ 插⼊html⽂档中，利⽤⽂档从上到下的执⾏顺序来显⽰进度条效果；
5. 根据实时数据显⽰百分⽐进度（由于⽹页加载缓慢的原因⼤多是图⽚过多过⼤导致，所以实时数据可由图⽚加载情况计算得出）；
<style>
.loading{
width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;
}
.pic{
width: 100px;height: 100px;line-height: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border:１px solid ccc;text-align: center;
}
span{
display: block;width: 80px;height: 80px;position:absolute;top: 10px;left: 10px;box-shadow: 0 30px 0 #666;border-radius: 50%;animation: rotate 1s infinite linear;
}
@keyframes rotate{
0%{transform: rotate(0 deg)};
100%{transform: rotate(360deg)};
}
</style>
<div class='loading'>
<div class='pic'>
<span></span>
<b>%</b>
</div>
</div>
<img src='' />
<img src='' />
<script>
$(function(){
var img = $('img');
var num = 0;
img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;
num++;
$('b').html(parseInt(num/$('img').size()*100)+'%');
if(num >= i){
$('.loading').fadeOut();
}
};
oImg.src = img[i].src;
});
})
</script>。