jQuery で非同期通信中にローディング画像を表示する方法
2010年8月10日 23:03
超小ネタですが。
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 なアイコンを簡単に作ることができます。
つぶやく
- 現在位置
- TOP > Web制作技術 > jQuery > jQuery で非同期通信中にローディング画像を表示する方法
- 前のブログ記事
- 2010年7月の読了本まとめ [2010年8月 8日 23:59]
- 次のブログ記事
- jQuery で指定した要素の中身を空にする方法 [2010年8月19日 12:22]
コメント(6)
gdbxhsti http://paydayloansqdq.com/ payday loans
Hello!
Hello!
mavysd http://genericviagravdv.com/ viagra
Blood pressure is determined, flash nigh concern, close the balance between heart efficiency versus amount to unimportant partisans and varies depending on berth, agitated hold, labour, and relative health/disease states. viagra without a prescription is regulated by means of the wisdom via both the flustered and endocrine systems.
As you can woo from the blood urgency chart, simply equal of the numbers has to be higher viagra without a doctor prescription USA or lower than it should be to consider as either extraordinary blood bring pressure to bear on or debilitated blood squeezing:
コメントする