【JQuery】処理待ち中にアニメーション表示する

公開日：2014/06/15

更新日：2014/06/04

カテゴリー: JQuery

JQueryで処理待ち中にアニメーションを流す方法を紹介します。

ページの読み込みやajaxでの通信に時間がかかる場合、ユーザーに「動いているのか？」とストレスを与えるかもしれないので、そういうときに有効かと思います。

アニメーションの準備

処理待ち中に「動いてますよー」というアニメーションは下のようなgif画像を用います。

肝心なgif画像の作り方ですが、以下のようなツールがありますので、それを使うと手っ取り早いです。

ここではアニメーションgif画像のファイル名は「loading.gif」にしたいと思います。

HTML

id要素「loading」と「contents」をもつブロックを作成します。

そして1つ目のブロックにアニメーションgif画像を、2つ目のブロックにコンテンツを入れます。

<div id="loading"><img src="loading.gif"></div>
<div id="contents">ここにコンテンツ</div>

そしてCSSで装飾を行います（シンプルにするためここではCSSの記述は省略します）。

jQuery

まず、「contents」部分を非表示にします。

$(function(){
	$('#contents').css('display', 'none');
});

この理由は、ページの表示が完了するまでコンテンツを非表示にしておき、その間にアニメーションを表示させるためです。

※通常、ページの表示は表示可能な部分からどんどん表示されていくので、アニメーションの表示がうまくいかなくなります。

#contents{display:none;}

なお、このように直接CSSに表示をしない指定をしても良いですが、javascriptをオフにしているユーザーにはコンテンツが表示されないリスクがあります。

window.onload = function(){
	$(function() {
		//ページの読み込みが完了したのでアニメーションはフェードアウトさせる
		$("#loading").fadeOut();
		//ページの表示準備が整ったのでコンテンツをフェードインさせる
		$("#contents").fadeIn();
	});
}

「window.onload」は、ページの表示（HTMLや画像）が全て完了したときに発生するイベントです。

ページの表示が完了したあとは、「fadeOut()」でアニメーションをフェードアウトさせ、次に「fadeIn()」でコンテンツをフェードインさせています。

サンプルプログラム

以上を踏まえてサンプルを作成しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>サンプルプログラム</title>
    <style>
      #loading{
	position:absolute;
	left:50%;
	top:20%;
	margin-left:-30px;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
	//コンテンツの非表示
	$(function(){
		$('#contents').css('display', 'none');
	});
	//ページの読み込み完了後に実行
	window.onload = function(){
		$(function() {
			//ページの読み込みが完了したのでアニメーションはフェードアウトさせる
			$("#loading").fadeOut();
			//ページの表示準備が整ったのでコンテンツをフェードインさせる
			$("#contents").fadeIn();
		});
	}
      //-->
    </script>
  </head>
  <body>
     <div id="loading"><img src="loading.gif"></div>
     <div id="contents">ここにコンテンツ</div>
  </body>
</html>

また、デモを準備しましたので参考にしてください。

こちら

なお、デモのページのコンテンツはかなり少量で速攻ページの読み込みが完了するので、わざわざ「delay(1000)」で1000ミリ秒アクションを送らせています。

また、通常のサイトであってもすぐに読み込みは完了するのでわざわざアニメーション表示をさせる必要はないかもしれません（ぎゃくにユーザーのストレスにつながる）。

使いどころとしては、画像を大量に使っているページや、回線速度が遅いユーザー向けになると思います。

あわせて読んでほしい！

Follow @ysklog_net 　