php 网页加载进度条,php – 显示进度条,而使用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的返回值示例：

...content

正如你可以看到，我有一个Bootstrap进度条，我在ajaxstart()显示，在我调用的页面上，我修改进度栏的每个项目加载后的值。

这在Firefox上工作得很好，我可以看到进度条，等待页面加载，但它不工作在Chrome或IE。

有没有更好的方法来做到这一点？我做这个正确或有另一种方法来做到这一点？

例如，获取$ .ajax页面大小(kb)，并在接收数据时随时更新进度条？

Gmail正在载入时，我尝试产生与载入网页类似的内容。