[2013年] jQueryを使ってローディング画像を表示

javascriptで何かしらの処理中にローディング画面を出そうと思ったとき、
プラグインを使うのもいいですが自分で作るのもそう難しいことじゃありません。
一見難しそうに見えるローディング画面も簡易的なものなら割とすぐに実装できてしまいます。

こんな感じの関数とスタイルシートを用意してloadingView(true)で表示、
loadingView(false)で消す、といったような使い方ができます。
もし自分で実装する場合はCSSは適宜自分用にカスタマイズされることをお勧めします。

js

function loadingView(flag) {
  $('#loading-view').remove();
  if(!flag) return;
  $('<div id="loading-view" />').appendTo('body');
}

css

#loading-view {
 /* 領域の位置やサイズに関する設定 */
 width: 100%;
 height: 100%;
 z-index: 9999;
 position: fixed;
 top: 0;
 left: 0;
 /* 背景関連の設定 */
 background-color: #000000;
 filter: alpha(opacity=85);
 -moz-opacity: 0.85;
 -khtml-opacity: 0.85;
 opacity: 0.85;
 background-image: url(/images/loading.gif);
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

jsではまず#loading-viewが存在したら消しておき、
表示開始でdiv#loading-viewをbodyに挿入するといったごく単純なものです。

軽く要所を説明すると、cssでは以下のように設定しておきます。

• width,heightを100%にして縦横を表示領域の分確保
• position を fixedにして画面に固定
• 背景を透過させる
• 背景画像として中央にローディング用画像を配置
  といった感じです。

ちなみにこのやり方、毎回DOMオブジェクトを作って挿入するのも非効率だなぁ、
と思った方は最初からローディング領域をhtmlソースに埋め込んでおき、
addClass()やremoveClass()でクラスをつけることで表示・非表示を制御、といったやり方や直接cssをいじってdisplay:none;とdisplay:block;を切り替えるといった方法もあります。

ちなみに利用方法の例ですが、

$.ajax({
  beforeSend: function(){
    loadingView(true);
  },
  complete: function(){
    loadingView(false);
  },
  /*その他のオプション(省略)*/
});

といったように、ajaxメソッドのbeforeSendとcompleteで指定してやると、
通信の開始前に表示して通信が完了したら(成否にかかわらず)消すといった使い方ができます。
前面にdivを表示してあるのでローディング画面を出した瞬間に後ろの部品をクリックすることができなくなり、処理中のクリック操作の抑止などにも重宝します。