php - 在执行 php exec() 时显示 javascript 加载图标

Question

我有一个 PHP 页面，它在加载时执行 python 脚本，一旦执行脚本，就会显示页面的其余部分，这是几个 div 的集合。

<?php

$str = exec('python -u read.py ' . $params, $output);
$str;

echo "welcome";
echo "<div id='div_1'>";
  echo "<div id = 'div_2'>";
  echo "you have finally landed, dude!";
  echo "</div>";
echo "</div>";

?>

问题是脚本需要大约 8 到 9（或有时 12）秒才能完全执行（通过 exec() 函数）。因此，只要脚本执行，我就需要显示一个 javascript 加载图标，并且然后在脚本完全执行后将其隐藏..解决此问题的最简单（而不是最简单）的方法是什么？谢谢。

Answer 1

当您第一次加载页面时，将此图像与您的 html 一起保留。

<img id="img" src="loader.gif">

然后使用它执行 php 脚本。

$(document).ready(function(){

    var url = "http://link_to_your_php_script";
    $.post(url, { /* You can have variable to post here */ }, function(data){
        if(data=="error"){
        alert("Error,page couldn't be loaded.");
        }
        else{
                  $("#id").html(data);
                }

        });
     $("#img").hide(); //Hide the loading image.

});

更改#id为#'id of element where you want to place the <div>....</div>'。

您不需要更改 php 脚本。您可以放置​​在您的 php 脚本中。

echo  "error";
exit;

如果有错误。

更好的做法是将底部的 php 更改为，

echo "welcome
     <div id='div_1'>
           <div id = 'div_2'>
           you have finally landed, dude!
     </div>
    </div>";
exit;

Answer 2

  setTimeout(function(){    
    document.getElementById("div_1").style.display = "none";
    document.getElementById("loading").style.display = "block";
}, 1200);

然后添加以下行

   echo "<div id='loading'>Loding......</div>";

我希望这会对你有所帮助，一切顺利！

Answer 3

<img id="img" src="loader.gif" style="display:none;">在前面添加这一行echo "<div id='div_1'>";

<!----------code to show loading image after submitting form, before the content is fully loaded--------------->
<script>
$(document).ready(function() {

$("#form1").submit(function() { //you can assign id to your form and used that id instead of form
$("#img").show();
$("#img").addClass("iimg");
$("div#div_1").hide();
return true;
});

});
</script>
<style>
    .iimg{
        margin-top:150px;
        height:15px;
        width:140px;
    }
</style>
<!-------------------------------------->