無法在頁面加載前運行Bootstrap進度條

我有一個大約需要50秒才能加載的php頁面。那段時間我想讓Bootstrap進度條運行。但是這隻在頁面加載後才運行。無法在頁面加載前運行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/[email protected]/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時立即執行此操作。

來源

2017-08-29 user3402248

試過在window.load函數中運行進度條嗎？ – Akintunde007

你必須顯示帶有沒有報告的進度條的頁面，然後從另一個使用Ajax的JavaScript頁面獲取報告。 – Jarzon

@freginold我認爲你錯誤地刪除了一些代碼。 – Jarzon

默認情況下，PHP只會在HTML /輸出發送到瀏覽器時，它的完全做到。這就是爲什麼在頁面加載完成之前你沒有看到進度條的原因。有兩種方法可以解決這個問題：

您可以在PHP腳本完成之前使用輸出緩衝發送頁面內容。根據你的服務器配置，這個選項可能會或可能不適合你。閱讀在這裏：http://php.net/manual/en/book.outcontrol.php
改變你的頁面中使用AJAX動態更新頁面。當頁面加載時，您只會顯示進度條。然後，您將對另一個PHP腳本進行AJAX調用，該腳本將完成獲取數據所需的工作。完成後，它可以將數據返回到第一頁，並且您可以使用JavaScript/jQuery隱藏進度欄並更新頁面內容。

你最好選擇2，因爲這是目前比較接受的Web應用程序標準。

來源

2017-08-29 18:02:29 neuromatter

無法在頁面加載前運行Bootstrap進度條

回答

相關問題