页面加载时显示百分比指示器（ajax）

Question

我昨天整晚都在寻找解决方案，但我找不到工作示例，但我取得了一些初步进展。在控制台日志中，我可以看到代码已部分加载，因此我得到了一些加载阶段。

当我点击刷新时，这是我在控制台日志中得到的：

6.826666666666667% 
13.653333333333334% 
20.48% 
27.30666666666667% 
34.13333333333333% 
40.96% 
47.78666666666667% 
54.61333333333334% 
61.44% 
68.26666666666666% 
75.09333333333333% 
81.92% 
88.74666666666667% 
95.57333333333334% 
100%

我遇到的问题是它不是实时显示的，“飞行”之类的。进度条和控制台日志都在页面加载后显示，而不是在加载时显示。所以进度条在开始时只有 0 %，当页面加载时它直接到 100%。

这是我开始的地方：http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

这是我正在使用的实际代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
  xhr: function()
  {
   var xhr = new window.XMLHttpRequest();

    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
          $("#progress-bar").css('width', '' + (100 * evt.loaded / evt.total) + '%');
        var percentComplete = evt.loaded / evt.total * 100 + '%';
        //Do something with download progress
        console.log(percentComplete);

      }
    }, false);
    return xhr;

  },
  type: 'POST',
  url: "prog-dat.php",
  data: ({status: 264}),
  success: function(data){
    jQuery("#content").html(data);
    jQuery("#content").show();
  }
});
</script>

<div id="progress-bar"></div>
<div id="content" style="display:none;"></div>

处理文件atm是这样的：

<?php
if(isset($_POST['status'])) {

for($a=0;$a<10;$a++){ 
     for($b=0;$b<10;$b++){ 
           for($c=0;$c<10;$c++){ 
               for($d=0;$d<10;$d++){ 
                 echo $a.$b.$c.$d.", "; 
               } 
            } 
       } 
 } 
}
?>

我试图放置大图片而不是 php 代码它没有改变任何东西我也尝试过包括旧的 jquery 库 1.4.4 并且我使用了我在上面发布的链接中介绍的旧方法（在发送方法之前）它也以相同的方式工作- 它在加载时不显示进度我只能在控制台中检查阶段，因为它会在页面加载后返回数据。

有没有人可以解释并举例说明它是如何实时工作的？

Answer 1

我在尝试让进度条工作时也经历了同样艰难的时光。这是我所做的（使用 JQuery UI 的进度条样式）：

    $.ajaxSetup({
        async: true,
        xhr: function() {
            var TimeOut=null;
            var xhr = new window.XMLHttpRequest();
            //Download progress
            xhr.addEventListener('progress', function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    if (percentComplete==100) {
                        $('#progress').css('width', '100%');
                        TimeOut=setTimeout(function() { $('#loadingoverlay').remove() }, 1000);
                    } else {
                        TimeOut=null;
                        if ($('#loadingoverlay').length==0) {
                            $('body').append('<div style="margin: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 0px; position: fixed; height: auto; z-index: 10000; background-color: rgba(125, 125, 125, 0.8);" id="loadingoverlay"><div id="loader" class="ui-corner-all" style="margin: auto; width: 25%; position: relative; top: 50%;"><div aria-valuenow="20" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" id="progressbar"><div id="progress" style="width: '+percentComplete+'%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div></div></div></div>');
                        } else {
                            $('#progress').css('width', percentComplete+'%');
                        }
                    }
                }
            }, false);
            return xhr;
        }
    });