网页加载进度

 

 

1.常见错误的实现方案

　　采用定时器在固定秒数清除遮盖进度层来实现相似的伪效果，并未按照真实的加载进度来进行加载。只能在表现上达到进度条

2.正常进度条

　　2.1 加载状态事件

document.onreadystatechage 頁面加载状态改变时间
document.readyState 返回当前文档状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

 

 

　　示例代码：

//监听页面改变事件
document.onreadystatechange=function(){
// 打印测试
console.log(document.readyState);
// 加载完成事件
if(document.readyState === 'complete'){
//加载完成后隐藏loading层
$('#loading').hide();
}
}

 

2.2 利用html从上到下加载

　　在html 中间的几个位置设置加载的百分比的js代码块

　　这种方式只是可已获取到页面加载完全部数据，但并没有渲染完成

示例代码

<!-- 在load 层后面添加-->
<script>
$("#loading .pic").animate({width:10%},100)
</script>
<!--中间关键位置添加进度控制-利用html的加载是顺序执行的达到-按进度显示-->
<!--body 最后添加-->
<script>
$("#loading .pic").animate({width:100%},100).hide();
</script>

 

2.3 利用img对象来实时获取进度【仅仅只针对图像处理，所以不一定准确，如果包含视频和音频则要对应处理】

var img =$('img');
var num=0;
 
img.each(function(){
var oImg=new Image();
//图片加载完成事件
oImg.onload=function(){
//防止gif重复请求
oImg.onload=null;
 
num++;
//设置进度
$('.loading .picText').text(parseInt(num/$('img').size()*100)+'%')
if(num===i){
$('.loading').fadeOut()
}
}
//图片src赋值应该放在onload之后防止ie出现缓存错误
oImg.src=img[i].src;
})