在单页网站中使用 jquery ajax 加载页面时显示进度条

我有一个基本页面，顶部有一个导航栏，还有一个包装主体。

每当用户单击它使用的导航链接时.load将页面内容加载到包装器 div 中。

$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});
$(this).ajaxEnd(function(){$('progressbar').hide();});

$('.ajaxspl').on('click',function(e){
    e.preventDefault();

    var url=$(this).data('url'),
        wrap=$('body #wrap');

    //clean the wrapper
    wrap.slideUp().html('');

    //load page into wrapper
    wrap.load(url,function(){wrap.slideDown();});
});

返回值示例.load:

<div>
...content
</div>
<script>$('.progressbar .bar').css('width','30%');</script>
<link href="/assets/css/datepicker.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','60%');</script>
<link href="/assets/css/main.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','90%');</script>
<script>//blah blah</script>

如您所见，我有一个显示的 Bootstrap 进度条ajaxstart()，在我调用的页面上，我在加载每个项目后修改进度条的值。

这在 Firefox 上运行良好，我可以在等待页面加载时看到进度条，但在 Chrome 或 IE 上不起作用。

有一个更好的方法吗？我这样做是否正确，或者还有其他方法可以做到这一点？

例如，得到$.ajax页面大小（以 kb 为单位）并在收到数据时动态更新进度条？

我正在尝试在 Gmail 加载时生成类似于加载页面的内容。

请允许我向您推荐这一页 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/，它描述了如何添加progress eventxhr 对象的侦听器（仅适用于这些浏览器 http://caniuse.com/#feat=xhr2，在较旧的浏览器中，您只需依赖于当前在 jquery 中使用的相同基础）。

作为参考，我复制了下面的相关代码（您可能只对“下载进度”部分感兴趣）：

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

请允许我说，这对于单页网站来说有点过分了，而且只对大文件有用。此外，图像和类似媒体不会以这种方式处理，您需要监视图像的加载（或通过 ajax 自己完成）以使这样的系统变得完美。

这是一个 JSFiddle，展示了这一点：http://jsfiddle.net/vg389mnv/1/ http://jsfiddle.net/vg389mnv/1/