Jqueryでsubmit前にロード画面を出したいが、スマホの場合に限って挙動がおかしい。

submit前にロード画面的なものを出すというのは割とありがちだと思うのですが、こんな感じで作っています。

html
1<div class="loading">
2    <div class="loadIMG">
3        <img src="/load.png">
4        <p class="messsage">Now Loading...</p>
5    </div>
6</div>
7
8<form id="form">
9<!-- 割愛　-->
10</form>
11<button type="button" id="submit">送信</button>

css
1/*ロード画面*/
2.loading {
3    display: none;
4    justify-content: center;
5    align-items: center;
6    position: fixed;
7    z-index: 9999;
8    width: 100%;
9    height: 120%;
10    background-color: rgba(0, 0, 0, 0.3);
11}
12
13.loading .messsage {
14    text-align: center;
15    color: #ffffff;
16    font-weight: bold;
17}
18
19.loadIMG img {
20    width: auto;
21    height: 150px;
22}

javascript
1$('#submit').on('click', function () {
2      $(".loading").css("display", "flex");
3      $("#form").submit();
4});

このコードでPC上では問題なくロード画面が表示されるのですが、スマホだとなぜかロード画面が表示される前にsubmitが発火し、ページ遷移してしまいます。処理が速すぎて表示する前にページ遷移してしまうとか、そういうことなんでしょうか？どなたかご助力いただけると幸いです。

【追記】
ちなみにshow()を使っていない理由は、CSSでフレックスボックスを使っているためです。この辺に原因があるのでしょうか？

x_x

2018/08/31 02:07

$("#form").submit();の代わりにreturn false;と書くとどうなりますか？

退会済みユーザー

2018/09/02 00:13

遅れました。送信されずにずっとロード画面が出ますね

行動規範の内容に同意します

回答1件

ベストアンサー

結局詳しい原因がわからなかったので、submit処理を少し遅延させることにしました。

javascript
1$('#submit').on('click', function () {
2      $(".loading").css("display", "flex");
3      setTimeout(function () {
4          $("#form").submit();
5      }, 100);
6});