js文件下載進度條實現（前端文件下載進度條）

本文目錄一覽：

• 1、關於js或jquery進度條實現？
• 2、JS做的進度條，如何做的？
• 3、js怎麼實現進度條！
• 4、js高手處理網站每頁加載時顯示進度條
• 5、文件下載如何使用進度條？
• 6、JS程序 圖片（即進度條）加載

關於js或jquery進度條實現？

寫一個div定義寬高，下面鋪一個背景圖片，作為進度條為空的情況。

再在div內部加添加一個img圖片，這個圖片要可以左右延展的。然後用JavaScript動態控制圖片的寬度即可，實現進度展現。

JS做的進度條，如何做的？

js其實是沒法計算到網頁的加載進度的。

目前見到的打開頁面顯示進度的有兩種

1、如果是flash做的，那是flash自身的加載進度。

2、如果是js做的，做法比較簡單，就是在頁面的不同的地方插入script標籤，動態改變進度的值。     

html

    head

        script

        var processPer = 0;

        window.onload = function(){

            document.getElementById(‘process’).innerHTML = processPer;

        }

        /script

    /head

    body

        div id=”process”/div

        div/div

        ….

        script

        processPer = 30;

        document.getElementById(‘process’).innerHTML = processPer;

        /script

        div/div

        ….

        div/div

        ….

        script

        processPer = 100;

        document.getElementById(‘process’).innerHTML = processPer;

        /script

    /body

/html

類似這樣的，就可以實現了進度的動態改變。

js怎麼實現進度條！

!DOCTYPE ” 

html xmlns=””  

head 

title進度條/title 

style type=”text/css” 

  body{ 

    text-align:center; 

  } 

  .graph{ 

    width:450px; 

    border:1px solid #F8B3D0; 

    height:25px; 

  } 

  #bar{ 

        display:block; 

        background:#FFE7F4; 

        float:left; 

        height:100%; 

        text-align:center; 

    } 

    #barNum{ 

        position:absolute; 

    } 

/style 

script type=”text/javascript” 

function $(obj){ //封裝方法，相當於jQuery

    return document.getElementById(obj); 

} 

function go(){ 

    $(“bar”).style.width = parseInt($(“bar”).style.width) + 1 + “%”; 

    $(“bar”).innerHTML = $(“bar”).style.width; 

    if($(“bar”).style.width == “100%”){ 

        window.clearInterval(bar); //進度為100時清除定時器

    } 

} 

var bar = window.setInterval(“go()”,50); //設置定時器

window.onload = function(){ 

    bar; 

} 

/script 

/head 

body 

div class=”graph” 

strong id=”bar” style=”width:1%;”/strong 

/div 

/body 

/html

js高手處理網站每頁加載時顯示進度條

這個很難實現的，因為要想實現準確的進度條，就必須知道要下載的總位元組數和當前已下載的位元組數，總位元組數除了html文件本身，還有裏面的各種對象如圖片、動畫、css文件、js文件等的位元組數，還要區分哪些是從電腦的cache取出的，哪些是從服務器下載的，有些數據要等到頁面完全下載完畢才能得到，這馬後炮有什麼用呢。IE瀏覽器本身的進度條都無法做到準確呢，何況用JS？

一般都是用個動態GIF圖片或Falsh循環滾動一下糊弄糊弄用戶就行了。我還沒見過能精確計算出加載進度的網站，如果有，那我只能說他們糊弄的技術很牛B

文件下載如何使用進度條？

在VS2005下使用webclient是可以使用進度條的。

方式是使用DownloadProgressChanged來實現

使進度條的value=e.ProgressPercentage

這樣就可以了。

還有，這個方式得使用異步下載。

JS程序 圖片（即進度條）加載

ajax默認情況下是異步執行的（建議盡量異步），也就是說當發出ajax命令後，程序是不停頓的，如果這時候隱藏圖片，那麼就相當於沒有顯示了（瀏覽器可能來不及把圖片顯示出來就被你隱藏了）。所以，標準做法是在ajax的回調函數中進行圖片的隱藏（建議用complete事件），比如：

var loading=document.getElementById(“loading”);

loading.style.display=”block”;  //盡量不要通過設為空白來顯示圖片，兼容性差

ajax({

    //…其他參數略

    success:…

    fail:…

    complete:function(){

        loading.style.display=”none”;   //在這裡隱藏！

    }

});