サイトの読み込みに時間がかかると、その分離脱率が上がってしまいます。サイトを高速化するための施策を講じるのがベストではありますが、ローディング画像を表示して、少しでもページを読み込んでいることがわかるようにするというのも一つの手です。
そこで今回は、jQueryを使って、ページ読み込み時にローディング画像を表示させる方法を紹介したいと思います。ページ読み込み時にローディング画像のみを画面いっぱいに表示するわけではなく、コンテンツの上に重ねて画像を表示させる方法になります。
ステップ1. ローディング画像の用意
まずは表示させるローディング画像を用意します。Loader Generatorなどのジェネレーターを使えばすぐに作成することができます。
ローディング画像を用意したら、サーバーの任意の場所にアップロードしておきましょう。
ステップ2. HTMLのマークアップ
ローディング画像を用意したら、<body>のすぐ下に以下のような記述を追加します。
<div id="loading"> <img src="images/loading.gif"> </div>
ファイルパスは適宜変更してください。
ステップ3. jQueryでローディング画像を表示
ローディング画像を設置したら、以下を追加します。記述する場所はどこでもいいので、</body>の直前などに記述しましょう。
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(window).load(function(){
jQuery("#loading").hide();
});
</script>
すでにサイトでjQueryをロードしている場合は、1行目は必要ありません。
hide()は、fadeOut()やslideUp()などのアニメーションに変更しても構いません。
ステップ4. CSSの調整
最後にCSSで配置などを整えたら完成です。以下にサンプルを載せておきます。
#loading {
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background: #fff;
opacity: 0.5;
position: fixed;
left: 50%;
top: 50%;
z-index: 999;
border-radius: 15px;
padding: 5px;
}
上記をそのままコピペすると、中央配置で透過度50%のローディング画像が表示されます。marginのところは画像サイズの半分マイナスするようにしてください。上記では横幅と高さが80pxなので、40pxずつ画像をずらしてきれいに中央配置しています。画像の中央配置については、こちらの記事をご参照ください。
あとがき
ページ読み込み中にローディング画像のみを表示するような凝ったものではありませんが、その分非常に簡単に実装することができますね。
サイトにローディング画像を表示させたいと思った時は、ぜひ参考にしていただければと思います。