« prototype.js | メイン | Apacheの.htaccessファイル »

サーバからの応答待ちに画像を表示

AJAX流ではページ全体のロードを行わないため、処理中であることをユーザに示す必要がある場合があります。例えば、GMailでは右上隅に赤い背景で「読込み中」とユーザに伝えています。イメージのスタイル属性の変更で処理中であることを示すのは簡単です。

あらかじめ用意しておいたGIFアニメを隠しておき、処理中だけ表示させる方法です。テスト用サンプルコードを以下に示します。

<html>
<head>
<script type="text/javascript" src="javascript/prototype-1.3.1.js"></script>
<script type="text/javascript">
 function start() {
   $("running").style.visibility = "visible";
 }
 function stop() {
   $("running").style.visibility = "hidden";
 }
 window.onload = function() {
   $("running").style.visibility = "hidden";
 }
</script>
</head>
<body>
<input type="button" value="開始"onClick="start()" />
<input type="button" value="終了"onClick="stop()" />
<img id="running" src="running.gif" />
</body>
</html>

ここで、running.gifが進行中であることを示すGIFアニメであり、ロード時には $("running").style.visibility = "hidden"; により隠されています。後は、処理中だけ"visible"にすれば、それなりの視覚効果が得られます。

トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/42

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)