无法在页面加载之前运行引导进度栏
无法在页面加载之前运行引导进度栏
提问于 2017-08-29 17:26:35
我有一个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="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>下面是PHP页面的链接。对于如何在页面加载之前运行进度条，有什么想法吗？当前，它在页面完全加载后加载。当用户在浏览器中输入URL时，我想立即运行它。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-29 18:02:29
默认情况下，PHP只会在HTML/output完全完成后才将其发送到浏览器。这就是为什么在页面加载完成后才会看到进度条的原因。有两种方法可以解决这一问题：
- 您可以使用输出缓冲在PHP脚本完成之前发送页面内容。取决于您的服务器配置，此选项可能对您有效，也可能不适用。在这里阅读：http://php.net/manual/en/book.outcontrol.php
- 更改页面以使用AJAX动态更新页面。当页面加载时，您将只显示进度条。然后对另一个PHP脚本进行AJAX调用，该脚本将完成获取数据所需的工作。完成后，它可以将数据返回到第一个页面，您可以使用JavaScript/jQuery隐藏进度条并更新页面内容。
您最好选择选项2，因为这是目前被接受的web应用程序标准。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45945009
复制相关文章
相似问题
腾讯云开发者
