Php 无法在加载页面之前运行引导进度条
我有一个php页面，加载大约需要50秒。在此期间，我希望引导进度条运行。但这只在页面加载后运行 这是我的密码：Php 无法在加载页面之前运行引导进度条,php,jquery,twitter-bootstrap,pageload,Php,Jquery,Twitter Bootstrap,Pageload,我有一个php页面，加载大约需要50秒。在此期间，我希望引导进度条运行。但这只在页面加载后运行 这是我的密码： <head> <title>Harvest Expense Report</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src
<head>
<title>Harvest Expense Report</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropdown.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 2;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
var link = document.getElementById('nav-ask');
link.style.display = 'none'
}
}, 500); })
</script>
</head>
<body>
<!--Progress Bar-->
<div class="row">
<div class="col-md-12">
<div class="progress"id="nav-ask">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose a Month
</button>
<div class="dropdown-menu" select name="Dropdown_Month" id="month_dropdown" aria-labelledby="dropdownMenuButton">
<option class="dropdown-item" href="#" value="This">This Month</option>
<option class="dropdown-item" href="#" value="Last">Last Month</option>
</div>
</select>
</div>
<br>
<br>
<br>
<h3><?php echo date('M Y'); ?></h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
</thead>
<?php require_once( 'connection.php' );
$result= $api->getUsers();
$users=$result->data;
$range= Harvest_Range::lastMonth();
foreach($users as $key=>$value){
$user_id=$value->get("id");
$first_name=$value->get("first-name");
$last_name=$value->get('last-name');
$result_expenses=$api->getUserExpenses($user_id, $range);
$expenses_data=$result_expenses->data;
$total_cost=0;
foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");
}}
?>
<?php if($total_cost!=0){?>
<tbody>
<tr>
<td> <?php echo $first_name; echo " ".$last_name; ?> </td>
<td> $ <?php echo $total_cost; ?> </td>
</tr>
</tbody>
<?php }}?>
</table>
</body>
</html>
收获费用报告
$（文档）.ready（函数（）{
var progressBar=$（'.progressBar'）；
var percentVal=0；
setInterval（函数（）{
百分比值+=2；
css（“宽度”，percentVal+'%'）.attr（“aria valuenow”，percentVal+'%'））.text（percentVal+'%'）；
如果（percentVal==100）
{
var link=document.getElementById（'nav-ask'）；
link.style.display='none'
}
}, 500); })
0%
选择一个月
这个月
上个月
名称
费用
$
下面是PHP页面的链接。在页面加载之前如何运行进度条？当前，它在页面完全加载后加载。我希望在用户在浏览器中输入URL后立即运行此操作。默认情况下，PHP只会在完成后将HTML/输出发送到浏览器。这就是为什么在页面完成加载之前，您不会看到进度条。有两种方法可以解决这个问题：
您最好选择选项2，因为这是目前更为普遍接受的web应用程序标准。尝试在window.load函数中运行进度条？您必须在不显示报告的情况下使用进度条显示页面，然后使用Ajax从另一个使用javascript的php页面获取报告。@freginold我认为您错误地删除了一些代码。您是否尝试过直接运行进度条（没有将其包装在
$（document.ready（）