как поставить значок загрузки перед загрузкой страницы

Question

У меня есть следующий фрагмент кода, который запускается нажатием кнопки.

<?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>";
    }
?>

perl скрипты внутри этого блока генерируют изображение, которое я загружаю на страницу, но эти два скрипта займет около 10 секунд. Поэтому я пытаюсь поставить спиннер-бустер, и у меня затухание 9,5 с в jquery.

Но спиннер и изображение вместе загружаются через 9,5 с. Код jquery, который я использую, приведен ниже. Пожалуйста, помогите, что нужно сделать.

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

Спасибо, Карти c

Answer 1

1. Добавить div сразу после тега.

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

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