ローディング中gifアニメーションを画面全体にかぶせる(オーバーレイ)

jQuery


こういうやつを画面全体のレイヤーに被せる方法です。




実装方法は、色々な手法で紹介されていますが、
なるべくシンプルに、かつ汎用的に使えるようにしました。
colorboxやlightboxプラグインを使っているサイトであれば、より楽です。

css,js呼び出し

<link href="../css/colorbox.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

ローディング画像をの最初に持ってくる

（http://loadinfo.net/などからいただきましょう）

<div id="loading"><img src="/img/loading.gif" width="48" height="48" alt="Loading..." /></div>
<div id="fade"></div><!-- colorboxなどを使っている場合は不要-->

CSS記述

#loading {
    width: 48px;
    height: 48px;
    display: none;
    position: fixed;
    _position: absolute; /* forIE6 */
    top: 50%;
    left: 50%;
    margin-top: -24px; /* harlf of height */
    margin-left: -24px; /* half of width */
    z-index: 10000; //　cboxOverlayが9999になっているため
}

ex) Ajaxでデータを読み込むケース

	$("#loading").bind("ajaxSend", function(){
	  $(this).show();
	  $("#cboxOverlay").css("opacity", "0.3").show();
	}).bind("ajaxComplete", function(){
	    $("#cboxOverlay").fadeOut(100);
	    $("#loading").fadeOut(100); // hide()でもOK（好みで】
	});

colorboxなどを使っていない、もしくは使いたくない場合は、上記jsのコード内の

#cboxOverlay => #fade

と変えて、cssに

#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF; // 好みで
    opacity: 0.3;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
}

追加で完了



これで設置したいページヘ最小限で可能になります。
もっとシンプルな方法を御存知の方いらっしゃれば、おしえてくださいmm