• 最終更新日:

ローディング画面を実装する!- 読み込み完了後にページを表示させる方法

ローディング画面をjQueryで実装する方法

今回はローディング画面をjQueryで実装する方法を紹介します。アニメーションや画像を多く使っているサイトにおすすめです。

デモサイト

ローディング画面をjQueryで実装する方法

ほとんどの場合は画像のサイズを見直すことで表示スピードは改善されます。それでも読み込みに3秒以上かかる場合はローディング画面の実装を検討してみてください。

HTMLに書くこと

HTMLにローディング表示に必要は記述をしていきます。以下のコードはの直後に貼り付けていきましょう。


<div id="loading">
    <div id="loading-main"></div>
</div>


CSSに書くこと

ローディングの回転している部分は画像ではなく、CSSで実装します。サイズや色の変更もCSS上でできるので、画像を使うより便利です。コピペで使えます。


//ローディング部分の回転エフェクト定義
@-moz-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

//ローディング画面の背景部分
#loading {
  width: 100vw;
  height: 100vh;
  background-color: #f6f7f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; }

//ローディング回転部分
#loading-main:after, #loading-main:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin-left: -50%;
  position: absolute;
  top: 40%;
  left: 50%;
  border-radius: 110%; }

#loading-main {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 45%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 105; }
  #loading-main:after {
    -moz-animation: loading 0.75s linear infinite;
    -webkit-animation: loading 0.75s linear infinite;
    animation: loading 0.75s linear infinite;
    border: 1px solid transparent;
    border-top-color: #666; }
  #loading-main:before {
    border: 1px solid rgba(51, 51, 51, 0.15); }


imagesLoaded.jsを読み込む

jQueryのコードを書く前に、画像を正確に読み込めたか判別できるimagesLoaded.jsを読み込みます。背景画像の読み込みまで判定してくれるのでオススメです。

imagesLoaded.js

以下のようにloadを使って実装するところが多いですが、正確に画像を読み込みこめているか曖昧なのでオススメしません。


$(window).on('load', function() {
    //画像を読み込めたタイミングが曖昧
});


 

imagesLoaded.jsはCDNが用意されているので、以下のように<head>の中に記述すれば読み込み完了です。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>


jQueryに書くこと

ページにある画像(背景画像も含む)がすべて読み込まれたら、ローディング画面をフェードさせます。読み込みに5秒以上かかっている場合は、強制的にローディング画面を非表示にします。


// 背景画像を含むすべての画像が正確に読み込みこめたら実行
$('.wrapper').imagesLoaded( { background: true }, function() {
        Loadingfade();
});

// 5秒経ったら、強制的にローディング非表示
$(function(){
  setTimeout(Loadingfade, 5000);
});

//ローディング非表示処理
function Loadingfade(){
  // 1秒かけてローディング部分を非表示にし、その後0.8秒かけて背景を非表示
  $('#loading-main').fadeOut(1000, function(){
    $('#loading').fadeOut(800);
  });
}


これでローディング画面が実装できました。フェードの時間はお好みで変更してみてください。フェードする時間が短すぎると違和感があるので、少し余裕を持たせましょう。

さいごに…

本来はローディング画面を実装せずに、高速でページを表示できることがベストです。
lazy loadのような画像遅延読み込みプラグインを使ったり、画像サイズを小さくすれば表示スピードを上げることができます。

アニメーションを多く使う場合は画像を読み込まれていないとエラーになることもあるので、ローディング画面を実装したほうが良いでしょう。