jQuery

【jQuery】シンプルなローディング画面の簡単な実装方法

 

動きのあるサイトに必ずといっていいほど実装されているのが、アニメーションがついたローディング画面です。

 

ページ読み込み中に、企業のロゴやローダー画像が表示され、アニメーションしながらページが表示される動きですね。

今回は、シンプルなローディング画面の実装方法についてまとめてみました。

 

jQueryでローディング画面の実装

 

See the Pen
ローディング
by kei (@kei_01011)
on CodePen.


 

右下の[Rerun]を押すか、右上のCodepenロゴを押して全画面表示させてくださいm(_ _)m

 

かなりシンプルな画像を使いましたが、動きとしては基本的なやり方だと思うので、応用も効きそうな気がします。

 

HTMLに、ローダー画像と、それをdivで囲んで配置します。

<div id="loader-bg">
	<img src="https://keibloglife.com/wp-content/uploads/2019/09/ajax-loader.gif">
</div>

	<!-- mv -->
	<div id="mv">
	<div class="inner">

	</div><!-- /inner -->
	</div><!-- /mv -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 

これを、CSSで

position:fixed;で固定させた上で、

z-indexを使ってページの上部に重ねるイメージです。

 

#loader-bg{
  background: #ffffff;
  height:100%;
  width: 100%;
  position:fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
#loader-bg img{
  background: #fff;
  position:fixed;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform:
  translateY(-50%)
  translateX(-50%);
  -webkit-transform:
  translateY(-50%)
  translateX(-50%);
  -ms-transform:
  translateY(-50%)
  translateX(-50%);
  z-index: 10;
}

#mv{
  height:100vh;
  width: 100vw;
  background-image: url("https://keibloglife.com/wp-content/uploads/2019/06/cowomen-1550122-unsplash.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

 

 

このまま読み込めば、白い背景の中央にローダー画像が表示され続け、いつまでたってもページが表示されません。

jQueryで動きをつけてあげます。

 

jQueryでページ読み込み後に動きをつける

jQuery(window).on('load', function() {
  jQuery('#loader-bg').delay(2000).fadeOut(800);
});

 

$(window).on( ‘load’, 関数名 );を使います。

簡単にいえば、

「画像ファイルなどの読み込み後に◯◯の処理を実行してね」

という意味になります。

 

つまり、ページ全体の読み込みが終了したら、#loader-bgをフェードアウトしてね

という命令に翻訳できますね。

 

ポイントとしては、

delayや、fadeOutにアニメーションの速度が記述してあります。

これがないと、読み込みが数秒で終わってしまった場合、ローダー画像が一瞬で閉じてしまうからですw

 

「なんか一瞬見えたけどなんだ??」ってことになるくらいなら、認識されるまで処理を待ってもらっているという感じですね。

 

あくまでも基本のやり方なので、いくらでもやり方はあると思います。

いろんなデザインをこなしつつ、バリエーションを増やしていきたいですね。