我昨天整夜都在寻找解决方案而且我找不到工作的例子,但我取得了一些初步进展。在控制台日志中,我可以看到代码已经部分加载,所以我有一些%的加载阶段。
当我点击刷新时,这是我在控制台日志中得到的:
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我用上面发布的链接中介绍的旧方法(在发送方法之前)它也以同样的方式工作 - 它在加载时没有显示进度我只能在控制台中检查阶段,因为它会在页面加载后返回数据。
有没有人可以解释并实时了解它的工作原理?
答案 0 :(得分: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;
}
});