jqueryでコンテンツや画像の読み込み中にローディングアニメーションを導入する方法

1.GIFアニメーション

ローディングにまず必要なGIFアニメーションですが、私はこちらから頂きました。

ちょっと便利帳：ローディング画像各種

ローディング画像の設置

設置場所はフェードインするコンテンツの直近に設置してやります。
具体的にはローディング画像とコンテンツをラップしておくといいのではないでしょうか。
例えばこんな具合です。

<div class="wrap">
	<div class="loading">ローディング画像</div>
	<div class="content"><!-- コンテンツ --></div>
</div>

ちなみにtopとleftを50%にするとローディング画像のサイズ分中央から寄ってしまいますが、CSSをこう書くと画像がセンターに配置されます。

.loader{
	position: absolute;
	z-index:100;
	top:0;
	left:0;
	right: 0;
	bottom:0;
	width: 48px;/* ローディング画像のwidth */
	height: 48px;/* ローディング画像のheight */
	margin:auto;
	display:none;
}

あとはjavascriptを切っているとローディング画像が表示されたままになってしまうのでdisplay:noneを指定しておきます。

フェードインでコンテンツを表示するコード

<script>
$(function(){
	$('head').append(
		'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
	);
    $(window).load(function(){
        var delaySpeed = 200;
        var fadeSpeed = 1000;
        $('.target').each(function(i){
            $(this).delay(i*(delaySpeed)).animate({opacity:'1',marginTop:'0px'},fadeSpeed);
        });
    });
});
</script>

ここにロード前はローディング画像を表示、ロード後フェードイン処理が開始される前にローディング画像を消去の処理を書きます。

<script>
$('head').append(
		'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
	);
$(function(){
    $('.loader').css('display','block');
    $(window).load(function(){
        var delaySpeed = 200;
        var fadeSpeed = 1000;
        $('.loader').each(function(i){
        	$(this).delay(i*(delaySpeed)).fadeOut(200);
        });
        $('.target').each(function(i){
            $(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1',marginTop:'0px'},fadeSpeed);
        });
    });
});
</script>

SAMPLE PAGE

6行目でローディング画像の表示、10～12行目でローディング画像のフェードアウト処理をしています。
コンテンツのフェードインと同様にforeachでディレイタイミングを段階的にして順番に消えるようにしました。

参考サイト

Gimmick log:ページ読み込み中にローディング画面を表示する