サーバからの応答待ちに画像を表示
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"にすれば、それなりの視覚効果が得られます。