サイトの読み込み中にローディング画面を表示する方法

サイトの読み込み中にローディング画面を表示する方法

サイトの読み込み中にローディング画面を表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイトにアクセスした時に、ページの読み込みが完了するまでローディング画面を表示する方法をご紹介いたします。

デモページを用意したので、動きについてはデモをご参照ください。

デモページを見る

スポンサードリンク

サイトの読み込み中にローディング画面を表示する方法

まずは、ローディング画面の準備が必要ですが、今回はSpinKitというCSSで実装するローディングアニメーションを紹介しているサイトを参考にしました。

Loader Generatorというローディング画像を生成するサービスを使っても良いですし、こういうサービスはたくさんあるので、好きなサービスを利用しましょう。もちろん自前で用意してもOKです。

SpinKitの使い方は非常に簡単で、サイトにアクセスして気に入ったローディングアニメーションがあったら、上部の[Source]をクリックします。HTMLとCSSが表示されるので、それをコピペで使います。

今回は一番シンプルなものを使いました。

HTML
<div id="loader">
 <div class="spinner"></div>
</div>

あとで必要なので、予めloaderというIDで包括しておきます。

CSSは以下の通り。

CSS

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 300px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

これでとりあえずローディング画面用の記述が完了です。

続いて、ページの内容は、以下のようにwrapというIDで包括します。

HTML
<div id="wrap">
 <div>ここにページの内容を記述します。</div>
</div>

最後にjQueryを記述して完了です。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
  var h = $(window).height();
  $('#wrap').css('display','none');
  $('#loader').height(h).css('display','block');
});
 
$(window).on("load", function() { //読み込み完了で実行
  $('#loader').delay(600).fadeOut(500);
  $('#wrap').css('display', 'block');
});
 
//10秒経過でロード画面強制非表示
$(function(){
  setTimeout('stopload()',10000);
});
function stopload(){
  $('#wrap').css('display','block');
  $('#loader').delay(600).fadeOut(500);
}
</script>

ページを表示する時にまず#wrapを非表示にしておき#loaderを表示、読み込みが完了したら#wrapの内容を表示して#loaderを非表示にするという動作になります。

ローディング画面がフェードアウトする時間などは、「delay(600).fadeOut(500)」の数字を変更して微調整してください。

また、10秒経過したら強制的にローディング画面を非表示にして、コンテンツの画面に移行するようにしています。

全体のソースとしては、以下の通りです。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>サイト読み込み中にローディング画面を表示する</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="loader">
 <div class="spinner"></div>
</div><!-- //#loader -->

<div id="wrap">
 <div>ここにページの内容を記述します。</div>
</div><!-- //#wrap -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
 var h = $(window).height();
 $('#wrap').css('display','none');
 $('#loader').height(h).css('display','block');
});
 
$(window).on("load", function() { //読み込み完了で実行
 $('#loader').delay(600).fadeOut(500);
 $('#wrap').css('display', 'block');
});
 
//10秒経過でロード画面強制非表示
$(function(){
 setTimeout('stopload()',10000);
});
function stopload(){
 $('#wrap').css('display','block');
 $('#loader').delay(600).fadeOut(500);
}
</script>

</body>
</html>
CSS

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 300px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

うまく動かない時は、スクリプトを<head>~</head>内に移動してみてください。

あとがき

サイトの読み込みに時間がかかるとユーザーのストレスに繋がりますが、素敵なローディング画面があることで少しは軽減してくれるかもしれません。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。