ローディング中にアニメーション画面を表示させる

最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また、テキストだけが先に表示され、一瞬ですがレイアウトが崩れてしまったりしてしまいます。

もちろん１番良いのは画像や動画のデータを出来る限り軽くする事ですが、場合によっては、サイトのデータが読み込まれるまでローディング画像を擬似的に用意する事でユーザーがストレスを感じ難くしてあげるなどの方法もあります。
本来はgifアニメなどでローディング画像を作るのが一般的ですが、今回はCSS3のアニメーションを使って、動きのある画像を見せる事でよりストレスの軽減を図ります。
すべての動きをCSS3のアニメーションで動かす事も一応出来ますが、jQueryと使い分ける事で、よりスムーズに表示させましょう。

イメージとしては、読み込み中はメインコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にする、というイメージです。

CSS3でやる事

ローディングアニメの動き

jQUeryでやる事

ローディング画像のレイヤーの表示・非表示のコントロール

目隠し用のローディング画像があるレイヤー（#containerの外）

<body>


<div id="container">
  メインコンテンツ
</div>

<div id="loader-bg">
<div id="loader">
<img src="ローディング画像">
</div>
</div>
</body>

jQueryでの「ready」と「load」と違いを理解する

両方ともjQueryを呼び出す為のものですが、呼び出すタイミングが微妙に違います。

「ready」はロードされて操作が可能になったタイミングで実行するという意味です。
「load」はロードされて画像などの関連データの読み込みが全て完了したら実行します。

css

#loader-bg {
width: 100%;
height: 100vh;
background: #000000;
position:fixed;
top:0;
left: 0;
}
#loader {
width: 160px;
height: 160px;
background: #E16163;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display:none;
}

$(function(){
  $('#container').css('display','none');
  $('#loader').fadeIn(400);
});
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});

※しかし、このままではスマホ時にスクリプトが適応されていない為、ずっとカバーがかかったままになってしまいます。
なので、if文に767px以下では「$('#loader-bg').css('display','none');」が適用されるようにスクリプトを追加しましょう。

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ローディング中にアニメーション画面を表示させる

CSS3でやる事

jQUeryでやる事

jQueryでの「ready」と「load」と違いを理解する