網頁加載進度

 

 

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;
})