无法在页面加载前运行 Bootstrap 进度条

Question

我有一个 php 页面，加载大约需要 50 秒。那段时间我想要 Bootstrap 进度条到运行。但是这运行只在页面加载后才发生。

这是我的代码：

    <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>

这是 link 到 PHP 页面。关于如何在页面加载前运行进度条的任何想法？目前它在页面完全加载后加载。一旦用户在浏览器中输入 URL，我想运行这个。

Answer 1

默认情况下，PHP 仅在完成后才将 HTML/output 发送到浏览器。这就是为什么在页面加载完成之前看不到进度条的原因。有两种选择可以解决这个问题：

您可以在 PHP 脚本完成之前使用输出缓冲发送页面内容。根据您的服务器配置，此选项可能适合您，也可能不适合您。在这里阅读：http://php.net/manual/en/book.outcontrol.php
更改您的页面以使用 AJAX 动态更新页面。当页面加载时，您将只显示进度条。然后，您对另一个 PHP 脚本进行 AJAX 调用，该脚本将执行获取数据所需的工作。完成后可以return数据到第一页，可以JavaScript/jQuery隐藏进度条，更新页面内容

您最好选择选项 2，因为这是目前更广为接受的 Web 应用程序标准。

无法在页面加载前运行 Bootstrap 进度条

Not able to run the Bootstrap progress bar before the page loads

php

jquery

pageload

twitter-bootstrap

无法在页面加载前 运行 Bootstrap 进度条

Not able to run the Bootstrap progress bar before the page loads

php

jquery

pageload

twitter-bootstrap

无法在页面加载前运行 Bootstrap 进度条