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

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>

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

<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でディレイタイミングを段階的にして順番に消えるようにしました。

まとめ

調べるまでは難しそうなイメージでしたが、やってみると結構簡単な作業でした。
まぁこんな小技に頼らず読み込みスピードを上げる作りにするに越したことはないのですが、動的なエッセンスを加えたい時やどうしてもという際は利用するのもいいんじゃないでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA