我怎樣才能動態地動畫一個AJAX加載欄，直到它達到100％？

這是我之前的一個跟進問題"How do I measure a loading time of an AJAX request and display a loading panel?"。現在我想知道我怎麼會想顯示動畫加載條/面板是這樣的：我怎樣才能動態地動畫一個AJAX加載欄，直到它達到100％？

什麼我的意思是，一個實際的移動面板從0％到100％。我在這裏有一些代碼來開始討論。我正在從這個美妙的site實施教程加載。

$("#connection").click(function(e) { 
     e.preventDefault(); 
     //show_loading(); 
     $.ajax({ 
      url: "./home/connect", 
      type: 'GET', 
      dataType: 'json', 
      progress: function(jqXHR, progressEvent) { 
       if (progressEvent.lengthComputable) { 
        console.log("Loaded " + (Math.round(progressEvent.loaded/progressEvent.total * 100)) + "%"); 
       } else { 
        console.log("Loading..."); 
       } 
      }, 
      success : function(data) { 
       //hide_loading(); 
       Materialize.toast(data.db_connect, 4000, 'rounded green'); 
      }, 
     }); 
    });

這段代碼的問題是，它在控制檯顯示100％達到100％，而不是活（示出從0實際計數 - 100）的時刻。

來源

2015-10-24 Hard Spocker

作爲最好的，我知道，阿賈克斯進度僅適用於實際數據傳輸那裏足夠重要的字節傳輸，進度指示器對於上傳或下載的時間是有意義的。進度事件不包括來自服務器的ajax響應時間。 – jfriend00

讓我們說我有一個計數5秒的功能，當計時器達到5秒時，我如何同步時間和進度條以達到100％？ –

我沒有看到任何progress功能在官方文檔，但我發現這個代碼here：

$.ajax({ 
    url: path, 
    xhrFields: { 
     onprogress: function (e) { 
      if (e.lengthComputable) { 
       console.log(e.loaded/e.total * 100 + '%'); 
      } 
     } 
    }, 
    success: function (response) { 

    } 
});

來源

2015-10-24 06:04:00 Shanoor

是的，他們表現得一樣。它仍然只顯示我的100％，而不是動態計數。 @ShanShan –

儘管問題很簡單，控制檯可以渲染實時數據饋送嗎？像我們在做什麼？ –

是的，控制檯始終工作。我認爲你的服務器不會發送響應的大小，所以進度是不可計算的。更多在這裏：http://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr – Shanoor

我怎樣才能動態地動畫一個AJAX加載欄，直到它達到100％？

回答

相關問題