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

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

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

  • 【16日迄】
    元米Google本社副社長監修「IT未来経営」とは?
  • このエントリーをはてなブックマークに追加

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

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

デモページを見る

スポンサードリンク

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

まずは、ローディング画面の準備が必要ですが、今回は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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var h = $(window).height();
$('#wrap').css('display','none');
$('#loader').height(h).css('display','block');
});
$(window).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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var h = $(window).height();
$('#wrap').css('display','none');
$('#loader').height(h).css('display','block');
});
$(window).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 で
スポンサードリンク

関連記事

コメントを残す

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