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

2014.9.2 jQuery

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

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

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

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

HTML

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

<div id="loading"><img src="image.gif" height="100" width="100" alt=""></div>
	<div class="cont">
	<p><img src="http://satohmsys.info/w/wp-content/uploads/2014/08/sharefunfun1.gif" height="576" width="1024" alt=""></p>
		<p>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.</p>
</div>

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

.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

	<div class="loading"><img src="loadamiation.gif" width="104" height="128"  alt=""></div>
	<div class="overlay"></div>
	
	<div class="cont">
		<img src="http://satohmsys.info/w/wp-content/uploads/2014/08/sharefunfun1.gif" alt="">
		<p>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!</p>
		<p>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!</p>
		<p>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!</p>
		<p>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!</p>
	</div>

 

<div class=”overlay”></div>でオーバーレイを実装します。これが画面全体を覆うように指定します。

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と任意の値を入れて中央寄せにします。

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

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

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

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

jQuery

		$(function(){
			//jQueryでフェードインさせるメインコンテンツを非表示に
			$('head').append(
			  '<style type="text/css">.overlay, .loading { display: block; }</style>'
			);

			$(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がフェードアウトしたために、コンテンツがフェードインして見えるだけのローディングエフェクトが完成です!

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

ローディングエフェクトをjQueryで実装するときのコツ

  • ローディングアニメーションはコンテンツ部分の外に置く
  • $(window).on(‘load’ , function(){})
  • 不要なHTMLはエフェクト後にremove()するのが吉
  • サイトのコンテンツ部分のフェードインなどはCSSでdisplay:noneにしたり無理に実装しない

朗報!ローディングアニメーションお手軽生成ツール紹介!

ローディングアニメーションを作るのが面倒なんだけど…

安心してください。

殆どの人が他力本願で実装しています。(すみません)

僕が知っている中でいくつかジェネレーターを紹介します!

loadergenerator

Loader Generator – Ajax loader

一番有名なんですかね?よく紹介されています。使いやすく、とても無難。

la

Preloaders.net – AJAX loading GIF and APNG spinners, bars and 3D animations generator

なかなか独特なアニメーションがあります。

loadinganimation

Loading Animation Generator (Simple circle on CSS3 animation) – ULTRAZONE

CSS3アニメーションで吐き出してくれます!

ajaxloadinfo

Ajaxload – Ajax loading gif generator

モノクロでちょっとアナログな感じのラインナップです。

 

Loading APNG

Loading APNG free online generator

小ぢんまりとしててちょこまかしたヤツが多い印象です。

 

以上、ちょっと長くなってしまいましたがローディングエフェクトの実装でした…

コンテンツが軽いとなんの意味もないのですが、ユーザーのストレスを緩和させる手段として”ダウンロードしてるんだよ”って明示的にするのは大事ですね!

まぁコンテンツが軽いのが一番ですけどね!

デモは勝手に持って行って構わないので、せめて何かの参考になれば幸いです。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。