たくさんの情報を発信しているサイト。

せっかく更新した記事も、ページの表示速度が遅いと見ている側はストレスに。

表示の遅いサイトは、それだけでユーザーが離れて行ってしまうことも・・

表示速度が遅くなる要因は複雑です。

表示させる画像のサイズや量、jsなどコードの問題だけでなく、WEBサーバのスペックの問題、さらにはネット環境によっても表示が遅くなることが。

できるところは改善していくことが大事。

ですが、ローディングアニメーションで読み込み完了までの待ち時間を楽しく過ごしてもらうのも手。快適に見てもらうための工夫も必要。

読み込みに時間がかかるページに。ローディングアニメーション

画面が真っ白になったり、読み込みがいつ終わるのかわからなかったりすると、見ている側は不安になるもの。今読み込んでいる状態だよ、ということを伝えることができるローディングアニメーションがあれば、安心感も与えられます。

このサイトも、一つのページに画像をたくさん読み込んでいる箇所が。

だんだん遅くなってきたのでローディングアニメーション、入れてみました。

CSS

#is-loading {
 display: block;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 background: #FFF;
 z-index: 8;
}
#loading {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
 color: #fff;
 z-index: 9;
}

読み込んでる途中の要素が見えないように「is-loading」の白い背景を用意。

初期表示ではローディング画面「loading」を非表示にしています。

HTML

<!-- ローディングのアニメーション -->
<div id="is-loading">
 <div id="loading">
  <img src="ローディング画像" alt="loadingなう" />
 </div>
</div>

<!-- コンテンツ部分 -->
<div id="loading__wrapper">
コンテンツ部分。ローディングアニメーションの読み込み後に表示します。
</div>

jQuery＆scriptを読み込み

<script src="/js/jquery-2.1.1.min.js"></script>
<script>
 $(function() {
 var h = $(window).height();
  $('#loading__wrapper').css('display','none');
  $('#is-loading ,#loading').height(h).css('display','block');
 });

 $(window).load(function () {
  $('#is-loading').delay(900).fadeOut(800);
  $('#loading').delay(600).fadeOut(300);
  $('#loading__wrapper').css('display', 'block');
 });


 $(function(){
  setTimeout('stopload()',10000);
  });

  function stopload(){
   $('#loading__wrapper').css('display','block');
   $('#is-loading').delay(900).fadeOut(800);
   $('#loading').delay(600).fadeOut(300);
 }
</script>

高さを指定してローディング画面を表示。

全ての読み込みが完了したらフェードアウトでふんわり非表示に、という処理をしています。

万が一読み込みが終わらないスクリプトや画像などがあった場合、ローディング画面が表示したままの状態になってしまうため、setTimeoutで10秒経過したらロード画面を非表示にする、という処理をしています。

アニメーションGIF作ってみた。

とりあえず、目玉をぱちくりさせてみました。

今回はgifアニメーションを使用しましたが、画像作るのめんどくさい…という方には、ローディング画面のジェネレーターサイトがおすすめ。

作るの大変そう・・と思っていたローディング画面でしたが、jQueryで簡単に実装できちゃいました。