我有一個正在通過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>
更新 - 請參閱我的回答如下。發佈此問題後我找到了解決方案。