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

コンテンツ読み込み中にローディングアニメーションを使用する

前回の記事でコンテンツのフェードインを導入しましたが、データ量が多いためこのままでは読み込み中その部分が真っ白になってしまいます。
これじゃコンテンツがないのか読み込めていないのか分からないので、併せてローディングアニメーションも導入しました。

jqueryでフェードイン表示！.animateでコンテンツや画像をフワッと表示させる方法

当サイトのフロントページは画像がやや大きめなのもあってか、少し読み込みが遅いのが気になっていました。そこで最近はそれほど見かけない手法です...

ローディングアニメーション導入準備

1.GIFアニメーション

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

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

ローディング画像の設置

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

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

<div class="loading">ローディング画像</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;
}

.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を指定しておきます。

jqueryの記述

まず前回までのフェードインさせるコードです。

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

<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>

$(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>