jsで読み込み中とか表示させてみる

Webアプリでボタン押下時に、読み込み中とローディング画像(下記参照)が表示されるものを実装してみる。

まず、どうやったら実現できるのか、ネットにもあるけど前にちょっと買ったprototype.jsのリファレンス本で調査を開始してみる。

prototype.jsパーフェクトリファレンス―Ajax実践プログラミング
古籏 一浩
アスキー・メディアワークス
売り上げランキング: 377653
おすすめ度の平均: 2.0
1 書名に偽りと真実あり
2 網羅的じゃない
3 本の出来は最高です。

Prototype Window Class?

「情報ダイアログを表示する」というのがあるのでこれを参考にする。どうやら、Prototype Window Classライブラリを読み込まないとダメみたい。

でも読んで、ちょっとライブラリをいじってみたがローディング画像を表示させるだけなのに手間がかかりすぎだと思い、別の方法を検討していみる。

読み込み中ノードを追加してやる

非同期通信を始めると同時にDOMを操作して、読み込み中用のノードを追加して、サーバから返答が帰ってきたら、その読み込み中ノードとサーバから帰ってきた値とを入替えちゃうというもっとも簡単ぽい方法を考えたのでそれで実装することにした。

まず非同期通信処理を行うjavascriptのメソッド内で下記のようなソースをローディング画像を表示したい場所に追加する処理を行う。

<div id="loading">読み込み中</div>

そして、すでに読み込んでいるCSSに下記のソースを追加する。

#loading {
  padding-left: 20px;
  text-align:center;
  height: 20px;
  widht: 100px;
  background: #FFFFFF url('loading.gif') no-repeat left center;
}

DOMの操作によって、div要素が追加されると、対象のCSSが適応され下記の状態のものが表示される。

するとうまい具合に、非同期通信中はローディング画像が表示され、その後サーバからの値と入替えるといい感じになるようになりました。めでたしめでたし。。。