技術資料

error この記事は最終更新日から14年以上が経過しています。

jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。

ローディング中の画像を表示するスクリプト

例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。

<p id="message">ここのメッセージが非同期通信後に変更されます。</p>
<form method="GET" action="#">
  <input type="button" value="ここをクリックでメッセージ変更" onclick="ChangeMessage();">
</form>

この時、function ChangeMessage() の中身は通常以下のようになります。

function ChangeMessage(){
	$.post(
		// 通信先URL
		"./message.cgi",
		// 送信するデータ
		{
			hoge:"huga"
		},
		// 返った結果の処理
		function(data){
			$("#message").html(data);
		}
	);
}

で、 message.cgi から結果が帰ってくるまでの間に「Now Loading」的な GIFアニメアイコンなんかを表示したければ、単に $.post (); の直前で、id="message" の中に GIFアニメアイコンを表示するようにすれば良いだけです。
結果が帰ってくれば、id="message" の中身はそのレスポンス内容に変更されますからね。

というわけで、

function ChangeMessage(){
	$("#message").html('<img src="loading.gif" width="10" height="10" alt="Now Loading..." />');
	$.post(
		"./message.cgi",
		{
			hoge:"huga"
		},
		function(data){
			$("#message").html(data);
		}
	);
}

みたいな感じの一行を追加すれば良いわけです。

ローディング中の画像の作り方

簡単にローディング中の GIFアニメアイコンを作れるサイトがあったので、ついでにご紹介。

Load Info - gif generator で、色々と Now Loading なアイコンを簡単に作ることができます。