submitとローディング

情けないけど、地味にハマった。

フォームのsubmitと同時にローディングを出すとかよくあると思いますが。
例えば

<form action="hoge.php">
<input type="text" />
<button type="submit">送信</button>
</form>

var $submitBtn = $('button[type="submit"]');
$submitBtn.on('click',function(){
    $('body').append('<div class="loading"><img src="loading.gif" /></div>')
});

みたいにするとFirefoxあたりで画像が表示されない or gifアニメが動かないみたいなことになる。

なぜかフォームの送信が優先されて通信が途中で止まってしまうようです。

そこでclickをmousedownにしたりmouseupにしたりしてみるともはや送信すらされない。。。

そもそも先にローディングを出そうという発想がダメみたい。

で、気持ち悪いけどこうする。

var $submitBtn = $('button[type="submit"]');
$submitBtn.on('click',function(){
    setTimeout(function(){
        $('body').append('<div class="loading"><img src="loading.gif" /></div>');
    },100);
});

送信の処理を先にしてから表示するようにほんの少しでいいのでずらす。

するとうまく画像も表示された。

jQueryなどでsubmitする場合も同様でsubmitが先。