網頁載入進度條

標籤：post   state   lan   css   asc   nbsp   thread   網站   根據   

( 網頁載入時，有時內容過多，一直載入等待，而此時網頁顯示白色不顯示任何的東西，給使用者的體驗相當不好，所以，一般會在網頁載入成功前，會以進度條的形式，給使用者進行展示。讓使用者可以看到動畫，知道網頁正在載入中) 

常見的方式有以下： 

1. 定時器的進度條（假的） 
<script type="text/javascript"> 
    $(function(){ 
        var loading=‘<div class="loading"><div class="pic"></div></div>‘; 
        $("body").append(loading); 
        setInterval(function(){ 
            $(".loading").fadeOut(); 
        },3000); 
    }); 
</script> 


2. 真實的擷取內容，實現載入進度條 
要實現根據真實內容，來載入進度條，下面要介紹兩個知識點： 

document.onreadystatechange  頁面載入狀態改變時的事件 
document.readyState 返回當前文檔的狀態 
1. uninitialized  -  還未開始載入 
2. loading        -  載入中 
3. interactive    -  已載入，文檔與使用者可以開始互動 
4. complete       -  載入完成 

2.1.  可以將如上定時器的代碼，修改為： 

document.onreadystatechange=function(){ 
         if(document.readyState=="complete"){ 
                  $(".loading").fadeOut(); 
         } 
} 

2.2.  將進度條變成css的小動畫進行顯示 

推薦網站： https://preloaders.net/ 此網站有各種表示載入的小動畫 

http://autoprefixer.github.io/ 線上給css添加首碼 

https://loading.io/ 進度條小動畫 

  
2.3： 定位在頭部的進度度,如： 
 

註：此實現，也並未是真實的顯示出載入的進度，而是利用：代碼從上到下執行的原則 
在代碼的不同位置，改變線條的寬度，在頁面的最後，讓寬度為100%來實現。 
如： 
 



2.4 即時擷取載入資料的進度條 
建立映像對象：映像對象名稱= new  Image(); 
使用:onload事件 
註：src屬性一定要寫到onload的後面，否則程式在IE中會出錯 
 



參考課程：http://www.imooc.com/learn/858

網頁載入進度條