Php 在单页网站中使用jquery ajax加载页面时显示progressbar

我有一个基本页面，上面有一个导航栏，还有一个包装器主体

每当用户单击导航链接时，它都使用

.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>

…内容
$（'.progressbar.bar'）.css（'width'，'30%）；
$（'.progressbar.bar'）.css（'width'，'60%）；
$（'.progressbar.bar'）.css（'width'，'90%）；
//废话

如您所见，我在

ajaxstart（）

上显示了一个引导进度条，在我调用的页面上，我在加载每个项目后修改进度条的值

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

有更好的方法吗？我这样做是正确的还是有其他方法

例如，以kb为单位获取

$.ajax

页面大小，并在收到数据时动态更新进度条

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

请允许我向您介绍，它描述了如何在jquery中向xhr对象添加一个

进度事件

侦听器（该侦听器仅适用于，在旧浏览器中，您只需依赖当前使用的相同基础即可）

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

但请允许我说，这对于一个单页网站来说是一个很大的滥杀滥伤，只对大文件才真正有用。此外，图像和类似媒体不是以这种方式处理的，您需要监控图像的加载（或通过ajax自己完成），以使这样的系统变得完美

---

下面是一个JSFiddle，显示了这一点：

上面的答案是正确的（向上投票）。自定义xhr请求运行良好，我使用您的代码对其进行了测试（并使用更大的文件查看实际进度），不妨将其复制到此处：

$('.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
    console.log('starting ajax request');
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                }
            });
            return xhr;
        }, 
        type: 'POST', 
        url: url, 
        data: {}, 
        complete: function(response, status, xhr) {
            console.log(response)
            wrap.html(response.responseText);
            wrap.slideDown();
        }
    });

});

---

如果您可以创建一个jquery版本是什么，这将非常有用？AJAX事件应该仅从jQuery1.9开始附加到文档中。我发现对于我的需求非常有用。太棒了。@RNKushwaha老实说，在这种情况下，不要急于下结论；-）如果你在工作中找不到答案，就寻求帮助。我真诚地认为这个答案已经过时了，因此几乎最终删除了它。哦，好吧，为我之前相当严厉的评论道歉，并且很高兴你的项目成功了：）。请注意；它只适用于

asynch:true

@JustMichael:第二行：“它只适用于这些浏览器”，其中“这些浏览器”是一个链接；-）所以答案是否定的。@DavidMulder不是一个完全的“否定”，它在IE10中起作用…：）

$('.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
    console.log('starting ajax request');
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                }
            });
            return xhr;
        }, 
        type: 'POST', 
        url: url, 
        data: {}, 
        complete: function(response, status, xhr) {
            console.log(response)
            wrap.html(response.responseText);
            wrap.slideDown();
        }
    });

});