大変お世話になっております。どうかご教授頂けませんでしょうか。

以下の様なphpのページ（site_a.php）がございます。このページは他のページから遷移され、そしてphpの処理をして約5秒後に他のページに自動で遷移していきます。

その約五秒の間、白の画面が表示されるのですが、javascriptのローディングの機能を自動発火する様に実装したいと考え、その下にある記述を追加いたしました。

しかしながら、機能しておりません。以前と同様に白の画面が表示され、約5秒後に次のページに遷移していきます。loadingのjavascript、あるいはそのための自動発火が機能していない様です。

このphpページでjavascriptのローディングがどうすれば機能するかお教え願いませんでしょうか？

尚、同様のローディングの機能はhtmlのページでは手動クリックの後に機能しております。

  • site_a.php
<?php

// phpのコーディング

?>

<form action='xxxxxx.php' METHOD='POST'>
<input type="submit" id="submit" value="" style="display:none;"/>   
</form>

<script>
document.getElementById("submit").click();
</script>
  • 上記の記述（site_a.php）にjavascriptのローディングの機能を自動発火する様な設定で追加。
<html>
<head>
<body id="loading">
</body>
</head> 
</html>

<script> 

$(function () {
  $("#loading").click( function() {

    // 処理前に Loading 画像を表示
    dispLoading("処理中...");

  });
});


    function dispLoading(msg){
      // 引数なし（メッセージなし）を許容
      if( msg == undefined ){
        msg = "";
      }
      // 画面表示メッセージ
      var dispMsg = "<div class='loadingMsg' style='color:blue; padding:10px; 
    text-align:center'>" + msg + "</div>";
      // ローディング画像が表示されていない場合のみ出力
      if($("#loading").length == 0){
        $("body").append("<div id='loading' style='color:blue; padding:10px; 
    text-align:center'>" + dispMsg + "</div>");
      }
    }



        /* ------------------------------
         Loading イメージ削除関数
         ------------------------------ */
        function removeLoading(){
          $("#loading").remove();
        }


            }

    </script>

<script>
document.getElementById("loading").click();
</script>

<?php

// phpのコーディング

?>

<form action='xxxxxx.php' METHOD='POST'>
<input type="submit" id="submit" value="" style="display:none;"/>   
</form>

<script>
document.getElementById("submit").click();
</script>
  • css
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}

#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("[LoadingイメージのURL]") center center no-repeat;
}