php 在单页网站中使用 jquery ajax 加载页面时显示进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15328275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show progressbar while loading pages using jquery ajax in single page website
提问by Zalaboza
I have a basic page with a navigation bar on top, and a wrapper body.
我有一个基本页面，顶部有一个导航栏，还有一个包装体。
Whenever a user clicks on a navigation link it uses .loadto load the page content into the wrapper div.
每当用户单击导航链接时，它都会将.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();});
});
Example of return value from .load:
来自 的返回值示例.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>
As you can see, I have a Bootstrap progress bar that I show on ajaxstart(), and on the page that I call I modify that value of the progress bar after each item is loaded.
如您所见，我有一个显示在 上的 Bootstrap 进度条，在ajaxstart()我调用的页面上，我会在每个项目加载后修改进度条的值。
This works nicely on Firefox and I can see the progress bar while waiting for the page to load, but it does not work on Chrome or IE.
这在 Firefox 上运行良好，我可以在等待页面加载时看到进度条，但在 Chrome 或 IE 上不起作用。
Is there a better way to do this? Am I doing this correctly or is there another method to do this?
有一个更好的方法吗？我这样做正确还是有另一种方法可以做到这一点？
For example, getting $.ajaxpage size in kb and update progress bar on the fly as data is received?
例如，获取$.ajax以 kb 为单位的页面大小并在收到数据时即时更新进度条？
I am trying to produce something similar to the Loading page when Gmail is loading.
我正在尝试在加载 Gmail 时生成类似于加载页面的内容。
回答by David Mulder
Allow me to refer you to this page, it desribes how you can add a progress eventlistener to the xhr object (which only works in these browsers, in older browsers you simply have rely on the same base you're currently using) in jquery.
请允许我向您介绍此页面，它描述了如何向jqueryprogress event中的 xhr 对象添加侦听器（它仅适用于这些浏览器，在较旧的浏览器中，您只需依赖当前使用的相同基础）。
For reference I have copied the relevant code below (you would only be interested in the 'Download progress' part probably):
作为参考，我复制了下面的相关代码（您可能只对“下载进度”部分感兴趣）：
$.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
}
});
Do allow me to say though that this is a lot of overkill for a single page website and only really becomes useful for large files. Additionally images and similar media aren't handled in this way and you would need to monitor the loading of images (or do it yourself through ajax) to make such a system perfect.
请允许我说，尽管这对于单页网站来说太过分了，而且只有对大文件才真正有用。此外，图像和类似媒体不会以这种方式处理，您需要监视图像的加载（或通过 ajax 自己完成）以使这样的系统完美。
Here is a JSFiddle showing this in action: http://jsfiddle.net/vg389mnv/1/
这是一个 JSFiddle，显示了这一点：http: //jsfiddle.net/vg389mnv/1/
回答by Laszlo R.
The above answer is correct (upvoted). A custom xhr request works well, I tested it with your code (and a bigger file to see actual progress), might as well copy it here:
上面的答案是正确的（赞成）。自定义 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();
}
});
});
