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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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

liginc.co.jp


photoshopvip.net


uxmilk.jp


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

もちろん1番良いのは画像や動画のデータを出来る限り軽くする事ですが、場合によっては、サイトのデータが読み込まれるまでローディング画像を用意する事でユーザーがストレスを感じ難くしてあげるなどの方法もあります。

ケルトンスクリーンの登場

以前はスピナーと呼ばれるローディング画像やプログレッシブバーなどが使用されてきましたが、しかし、ローディング時間が長ければ、この表現方法は効果を発揮しません。
そこで最近登場してきたのが、スケルトンスクリーンです。

www.skuare.net





今回は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」はロードされて画像などの関連データの読み込みが全て完了したら実行します。


スマホ時には必要ないので、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');」が適用されるようにスクリプトを追加しましょう。