読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

liginc.co.jp


photoshopvip.net


uxmilk.jp


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

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






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

CSS3でやる事

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

jQUeryでやる事

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



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

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

<div id="container">
  メインコンテンツ
</div>
</body>
jQueryでの「ready」と「load」と違いを理解する

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

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


スマホ時には必要ないので、767px以上の時だけの条件文を加える

$(function() {

if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(300);
});

$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});
//10秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout(stopload(),10000);
});
function stopload(){
  $('#container').css('display','block');
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
};
}else {
 $('#loader-bg').css('display','none');
}
});


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