( 網(wǎng)頁(yè)加載時(shí)，有時(shí)內(nèi)容過(guò)多，一直加載等待，而此時(shí)網(wǎng)頁(yè)顯示白色不顯示任何的東西，給用戶的體驗(yàn)相當(dāng)不好，所以，一般會(huì)在網(wǎng)頁(yè)加載成功前，會(huì)以進(jìn)度條的形式，給用戶進(jìn)行展示。讓用戶可以看到動(dòng)畫(huà)，知道網(wǎng)頁(yè)正在加載中)

常見(jiàn)的方式有以下：

1. 定時(shí)器的進(jìn)度條（假的）

<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. 真實(shí)的獲取內(nèi)容，實(shí)現(xiàn)加載進(jìn)度條

要實(shí)現(xiàn)根據(jù)真實(shí)內(nèi)容，來(lái)加載進(jìn)度條，下面要介紹兩個(gè)知識(shí)點(diǎn)：

document.onreadystatechange  頁(yè)面加載狀態(tài)改變時(shí)的事件
document.readyState 返回當(dāng)前文檔的狀態(tài)
1. uninitialized  -  還未開(kāi)始載入
2. loading        -  載入中
3. interactive    -  已加載，文檔與用戶可以開(kāi)始交互
4. complete       -  載入完成

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

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

2.2.  將進(jìn)度條變成css的小動(dòng)畫(huà)進(jìn)行顯示

推薦網(wǎng)站： https://preloaders.net/ 此網(wǎng)站有各種表示加載的小動(dòng)畫(huà) 

http://autoprefixer.github.io/ 在線給css添加前綴 

https://loading.io/ 進(jìn)度條小動(dòng)畫(huà) 

2.3： 定位在頭部的進(jìn)度度,如下圖：

注：此實(shí)現(xiàn)，也并未是真實(shí)的顯示出加載的進(jìn)度，而是利用：代碼從上到下執(zhí)行的原則
在代碼的不同位置，改變線條的寬度，在頁(yè)面的最后，讓寬度為100%來(lái)實(shí)現(xiàn)。

如下圖：

2.4 實(shí)時(shí)獲取加載數(shù)據(jù)的進(jìn)度條

建立圖像對(duì)象：圖像對(duì)象名稱(chēng)= new  Image();
使用:onload事件
注：src屬性一定要寫(xiě)到onload的后面，否則程序在IE中會(huì)出錯(cuò) 
 

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持!