jQueryでページが表示されるまでクルクルするアレ＝「ローディングエフェクト」を実装する

jQueryを使ってやりたいことのうちの1つではないでしょうか？

ページが表示されるまでのローディングエフェクト（”ローディングアニメーション”、”くるくる”とか言ったりしますよね）を実装します。

今回は2パターン紹介します！コンテンツが軽ければこのエフェクトはそんなに意味が無いんですよね…まぁコンテンツが軽いことのほうが重要なんで、勘違いしないように！

jQueryでページが表示されるまでクルクルするアレ＝「ローディングエフェクト」を実装する

HTML

まずはベースとなるHTMLを準備します。


  	  	
  		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus reprehenderit quod nulla excepturi earum accusantium. Sapiente earum necessitatibus natus exercitationem ea hic et accusantium! Architecto mollitia, iusto illo odio libero.

以下にこのように配置します。

.contで包まれている部分がメインコンテンツとします。ローディングエフェクト用のgifアニメなどはその外に配置します。

続いて、CSS

CSS

		img{  			max-width: 100%;  			height:auto;  		}    	#loading {  		width: 100px; /* gif画像の幅 */  		height: 100px; /* gif画像の高さ */  		margin: -68px 0 0 -50px; /* gif画像を画面中央に */  		padding: 20px; /* gif画像を大きく */  		background: #BABABA; /* gif画像の背景色 */  		opacity: 0.5; /* 透過させる */  		border-radius: 15px; /* 丸角 */  		position: fixed; /* gif画像をスクロールさせない */  		left: 50%; /* gif画像を画面横中央へ */  		top: 50%; /* gif画像を画面縦中央へ */  	}

position:fixedで、画面中央部に固定することがコツです。

ここまででこんな感じです。

アニメーションがそのまま表示されているデモ

では、jQueryを使いローディングエフェクトとして実装を進めていきます！

jQuery

$(function(){  			  	function anime(top=0){  		$('#loading').animate({  			top: top  		},  		500).fadeOut('slow');  	}	    	$(window).on('load' ,  		function(){  　　		　setTimeout( anime("0px"), 1000)		  		}  　　　　　);    });

$(window).on(‘load’ , function(){～})に、ページ読み込み終了直後の処理を書きます。
ここは$(window).load(function(){～})と続けても同義です！
.on() | jQuery 1.9 日本語リファレンス | js STUDIO
load(fn) – jQuery 日本語リファレンス

setTimeoutを使って、1000ミリ秒、指定の関数の実行を遅らせます。
その関数を3行目ぐらいから作っておきます。

	function anime(top=0){  		$('#loading').animate({  			top: top  		},  		500).fadeOut('slow');  	}

何をしているかというと、ローディングアニメーションの#loadingにアニメーションを設定しています。
ページの上の方に動いていった後にフェードアウトして非表示になる指定です。

#loadingにはposition:fixedが指定してあるので、コンテンツ部分のレイアウトには影響しません。

これを1000ミリ秒遅らせて実行することで、コンテンツがロードされてから時間差でローディングアニメーションが上の方に消えていく、という小細工が実装できます。

コンテンツがロードされてから時間差でローディングアニメーションが上の方に消えていく小細工のデモ

ですがわざわざsetTimeoutを使わなくても、fadeOut()だけだったり.hide(‘slow’)でニュルっと消しても面白いです。
hide(speed, [callback]) – jQuery 日本語リファレンス

コンテンツ自体をフェードインさせるローディングエフェクト

もう1つメモしておきます。

こちらはコンテンツ部分がフェードインしてくるタイプです。というか、フェードインしているようにみえるタイプです。

HTML

	
  	
  	  	  		  		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit autem nam, odit laboriosam placeat velit assumenda et blanditiis minima fugit ipsam! Quis dolore eius aperiam, iusto mollitia unde minima explicabo!
  		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit autem nam, odit laboriosam placeat velit assumenda et blanditiis minima fugit ipsam! Quis dolore eius aperiam, iusto mollitia unde minima explicabo!
  		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit autem nam, odit laboriosam placeat velit assumenda et blanditiis minima fugit ipsam! Quis dolore eius aperiam, iusto mollitia unde minima explicabo!
  		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit autem nam, odit laboriosam placeat velit assumenda et blanditiis minima fugit ipsam! Quis dolore eius aperiam, iusto mollitia unde minima explicabo!

でオーバーレイを実装します。これが画面全体を覆うように指定します。

CSS

img{  	max-width: 100%;  	height:auto;  }  .loading{  	margin-left: -50px;  	position: fixed;  	left: 50%;  	top: 40%;  	z-index: 3;  }  .overlay{  	width: 100%;  	height: 100%;  	position: fixed;  	top: 0;  	left: 0;  	background-color: #efefef;  	z-index: 2;  }    .loading , .overlay { display: none;}

.loadingはローディングアニメーションですが、前回と同様にposition:fixedと任意の値を入れて中央寄せにします。

その下の.overlayのwidthとheightを100%と指定し、こちらも同様にposition:fixedで画面にピッタリと固定表示します。

z-indexはローディングアニメーションの方に大きい値を指定するようにしましょうね、でないと見えないんでね。。

アニメーションがそのまま表示されているデモ2
※例のためローディングアニメーション（.loading）が表示してありますが、予めdisplay:noneで非表示にしておきましょう。

jQueryでローディングエフェクトを実装します。

jQuery

		$(function(){  			//jQueryでフェードインさせるメインコンテンツを非表示に  			$('head').append(  			  ''  			);    			$(window).on('load' , function(){  				$('.overlay').delay(1000).fadeOut('fast');  				$('.loading').delay(300).fadeOut(700);  			})  		})

最初のほうで、headタグ内にインラインCSSを追加しています。

そこでローディングアニメーション（.loading）とオーバーレイ（.overlay）をdisplay:block;にします。
jQueryで表示/非表示を切り替えるので、jQueryが万が一読み込まれなかった状況を考慮して、jQueryでCSSを操作しています。

続いて、これまた前回と同様にページ読み込み直後の処理を$(window).on(‘load’ , function(){～})に綴ります。

さらにさらに、前回と同様に時間差をつけます。
.overlayのフェードアウトをすこし遅らせます。今度はdelay()を使ってみました。カッコ内に、処理を遅らせる時間をミリ秒で指定します。
.delay() | jQuery 1.9 日本語リファレンス | js STUDIO

.loadingも同様に処理を遅らせています。.overlayか.loadingのどちらを先にフェードアウトさせたいかでdelay値など調節してみてください。

これで、上にかぶっていた.overlayがフェードアウトしたために、コンテンツがフェードインして見えるだけのローディングエフェクトが完成です！

コンテンツ部分がフェードインしているようにみえるタイプのデモ