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

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

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

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

jsやcssなどコードの量だけでなく、表示させる画像のサイズと数、要するにリクエストとレスポンスの数、同時多発的なアクセス数の問題、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 () {
    $('#loading__wrapper').css('display','block');
    $('#is-loading').delay(2000).fadeOut(1000);
    $('#loading').delay(1000).fadeOut(1000);
 });


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

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

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

指定したアニメーションの「.delay（引数）」は引数で指定した時間（ミリ秒）だけ待つ。

「.fadeOut（引数）」の引数で速度指定した時間（ミリ秒）フェードアウトして隠す。

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

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

追記：「ページ読み込み後に実行」の書き方

jQuery3以降、 $(window).load なくなっちゃいました。

// ページ読み込み後に実行
$(window).load(function(){});

こういう書き方になりました。

// ページ読み込み後に実行
$(window).on('load', function() {});

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

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

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

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

１ページに色々盛り込まないとか、画像を減らすとか動画をやめるとか・・デザイン的なやりたいことと表示速度を天秤にかけてデザインを妥協するのはなんか負けた気がして嫌です。

表示速度を上げたい。そこにお金をかけられるのであれば屈強なサーバ借りるとかかな。あとはキャッシュを使うとかでしょうか。まだまだ戦いは続きます。