如何在页面加载之前放置加载图标

Question

I have the following piece of code which is triggered by a button click.

<?php    
if(isset($_POST['click']))
            {
      echo "<div class='spinner-grow' role='status'>";
      echo "<span class='sr-only'>Loading...</span>";
      echo "</div>";

       shell_exec("perl myscript1.pl");
       shell_exec("perl myscript2.pl");

    echo "<div class='image'>";
    echo "<img src='figure.png' class='mx-auto d-block' style='width:800px; height:800px;'>";
    echo "</div>";
    }
?>

the perl scripts inside that block will generate a image which i will load into page, but those two scripts take around 10s. So I am trying to put a boostrap spinner and have given a fadeout of 9.5s in jquery.

But the spinner and the image together load after 9.5s. The jquery code i am using is below. Kindly help what needs to be done.

$(function() {
  $(".spinner-grow").fadeOut(9500, function() {
    $(".image").fadeIn(500);
   });
});

Thanks, Karthic

Answer 1

1. Add a div just after tag.

   <div class="pre-loader"></div> `

   $(window).load(function() { $(".pre-loader").fadeOut(); //or your loading icon wrapped in the pre-loader class });