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.οnlοad=function(){ //防止gif重复请求 oImg.οnlοad=null; num++; //设置进度 $('.loading .picText').text(parseInt(num/$('img').size()*100)+'%') if(num===i){ $('.loading').fadeOut() } } //图片src赋值应该放在onload之后防止ie出现缓存错误 oImg.src=img[i].src; })