2015-04-27 105 views
0

我有一個正在通過PHP網頁抓取生成的頁面。由於內容的收集會導致延遲,因此我試圖在加載過程中引入引導進度條。使用Javascript更新進度條,然後切換可見div的

我沒有將欄連接到任何實際的加載階段,我只是運行它3秒,然後讓代碼隱藏/顯示相關的div(第一個div包含加載欄,第二個包含內容)。

我有下面的代碼,但php-content div是立即出現,而不是延遲。 Chrome瀏覽器沒有輸出到javascript控制檯。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#loader").show(); 
     $("#php-content").hide(); 
     counter = 0; 
     run(); 
    }); 

    function update(value) { 
     $("#loadingBar").attr("style","width:"+value+"%"); 
     $("#loadingBar").attr("aria-valuenow",value); 
    } 

    function run() { 
     if (counter <= 3000) { 
      update(counter); 
      counter+=10; 
      setTimeout(run(), 10); 
     } else { 
      $("#loader").hide(); 
      $("#php-content").show(); 
     } 

    } 
</script> 

和HTML部分:

<div id="loader"> 
       <div class="progress"> 
        <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%"> 
         <span class="sr-only"></span> 
        </div> 
       </div> 
      </div> 
      <div id="php-content"> 
       <h2>Current Weather Conditions:</h2> 
       <table class="table table-bordered"> 
        <?php include 'php/scrape.php' ?> 
       </table> 
      </div> 

更新 - 請參閱我的回答如下。發佈此問題後我找到了解決方案。

回答

0

我發現基於此教程這裏的解決方案 - Animate Progress Bars with Jquery

基本上,我結束了簡單的使用jQuery的.attr()函數的進度條的寬度設置爲100%。使用css規則,轉換時間可以設置爲3秒。所有需要發生的事情是在代碼中設置一個超時,以在轉換髮生時停止執行其他任何操作。

腳本(看着整潔比以前):

$(document).ready(function() { 
$("#loader").show(); 
    $("#php-content").hide(); 
    $("#loadingBar").attr("style", "width:100%"); 
    setTimeout(function() {$("#php-content").show();$("#loader").hide();}, 3000); 
}); 

CSS:

.progress-bar { 
-webkit-transition: width 3s ease-in-out; 
transition: width 3s ease-in-out; 

}

2

我在你的代碼中的一些細微的變化,我認爲這是幫助你,這裏的代碼低於

Html代碼

<div id="loader"> 
       <div class="progress"> 
        <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%"> 
         <span class="sr-only"></span> 
        </div> 
       </div> 
      </div> 
      <div id="php-content"> 
       <h2>Content:</h2> 
       <table class="table table-bordered"> 
        new content 
       </table> 
      </div> 

CSS代碼

#loadingBar{background: red;float: left;min-height: 20px;} 
#php-content{display:none;} 

jQuery代碼

jQuery(document).ready(function(){ 
     jQuery("#php-content").animate({'opacity' : '0'}); 
     jQuery("#loader").animate({'opacity' : '1'}); 
     counter = 0;   
     run(); 
    }); 

    function update(value) { 
     jQuery("#loadingBar").animate({width:value+"px"}); 
     jQuery("#loadingBar").attr("aria-valuenow",value); 
    } 


    function run() {   
     if (counter <= 800) { 
      jQuery("#loader").animate({'opacity' : '1'}); 
      jQuery("#php-content").animate({'opacity' : '0'});    
      update(counter); 
      counter+=10; 
      setTimeout(run(), 10); 
     } else {    
      jQuery("#loader").animate({'opacity' : '0'}); 
      jQuery("#php-content").show(); 
      jQuery("#php-content").animate({'opacity' : '1'}); 
     } 

    } 

演示鏈接 http://jsfiddle.net/kishan_web/b2jzu4er/