jquryでローディング画像を表示

Question

Jqueryでローディング画像を出したいのですが上手く行きません。

<input type="submit" value="Go" id="submitbtn">

$(function() {
	$('#submitbtn').click(function() {
		setTimeout(function() {
			$("#loading").fadeIn();
		},100);
	});
});

#loadingエリアを最初display:noneで非表示にしておいて、検索ボタンをクリックした後にローディング画像を表示させたいです。

どこが悪いかわかりますでしょうか？

よろしくお願いいたします。

Comments

[ikuwow]

タイトル等にある「Jqury」等の誤植を「jQuery」になおすことをおすすめします

Answer 1

クリックイベントを拾うのではなくて
submitでonclickを使って表示させるのはどうでしょう

Comments

[nantaro]

ありがとうございます！
onclickを使ったら上手く行きました。

ところで、上に書いたソースではなぜうまく行かなかったのでしょうか？
ちょっと気になりますので、もしわかれば教えてください。
よろしくお願いいたします。

[come25136]

ソースに関してはsetTimeoutが要らないような気がします

ちなみに僕ならこういう場合非表示ではなく画像表示コード自体を#loadingエリアに追加します
あと回答済みにすることをおすすめします

[come25136]

>あと回答済みにすることをおすすめします
解決済みの間違いでした...

[nantaro]

ありがとうございました！

Answer 2

submitボタンは基本的にページが遷移するので、スクリプトの実行が一瞬で終わってしまい、ローディング画像は見えません。
そもそもローディング画像はAjaxと組み合わせることが多いので、ご質問のような表示方法はあまりやらないと思います。

Comments

[nantaro]

早速のご回答ありがとうございます。

今回の場合、APIからデータを取得していて、submitボタンを押してからその処理までに30秒～1分程度かかります。その間ローディング画像を表示させたいを考えています。
その場合はいかがでしょうか？