リッチなコンテンツを求められるウェブサイトの場合はクライアント側で動きのある機能が効果的です。その中でも比較的よく見かけるのがページローディング機能です。ページの読み込み次第ではどうしても表示順序がバラバラになってしまうのでちょっと不恰好な印象を与えてしまう可能性もあります。   そこでページの読み込みの間にローディング画像を加えることで、すべて読み込みが終わってページコンテンツが揃った状態で表示できるのと、動きのある機能を加えることで洗練された印象を与えることができます。   ではコードを見ていきたいと思います。まずはHTMLから、ページローディングの要素は最初に持ってきます。その後にメインのコンテンツが続きます。ページローディングの構成ですが、全体を覆うラッパー要素とその中にローディング中を示すアイコンを入れています。こちらについてはデザインによって適宜アレンジするのもいいかと思います。 【HTML】※一部抜粋

<div id="pageloading-wrap">
   <!-- 「Loaders.css」をアイコンに採用 -->
   <div id="pageloading-icon" class="ball-pulse-sync"><div></div><div></div><div></div></div>
</div>
<div class="content">
   <!-- 以下コンテンツ本文 -->
</div>

    ちなみに今回使用したローディングアイコンですが「Loaders.css」というのを採用しました。すべてCSSで作られており、実装やカスタマイズも簡単でいろんなパターンが用意されているのでオススメです！ 【Loaders.css】 https://connoratherton.com/loaders   このLoaders.cssを使用するには専用のCSSファイルを次のようにインクルードする必要があります。詳しくは上記の公式サイトをご覧ください。

<link rel="stylesheet" href="./loaders.min.css" type="text/css">

  今回はこのようなCSSのローディングアイコンを使用しましたが、gifアニメの画像アイコンなどデザインに合わせて用意するのもOKです。   次にCSSですが、ページローディングのラッパー要素を画面を含むページ全体に表示されるようにします。こちらのサンプルではアイコンが常に中央に配置されているようにしていますが、デザインに合わせて適宜調整します。 【CSS】

#pageloading-wrap {
   background: #466bda;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: table;
   z-index: 1;
}
#pageloading-icon {
   display: table-cell;
   vertical-align: middle;
}

    最後にjQureyで表示の動きをつけていきます。こちらはとてもシンプルで、ページのロードが完了したタイミングでページローディング画面をフェードアウトさせるという動きです。念のため、読み込みがなかなか終わらないケースを想定して、一定時間で強制的にフェードアウトさせるようにしておくのもいいかと思います。 【javascript】

$(function(){
   $(window).on('load',function(){
     $("#page-loading").delay(1000).fadeOut('slow');
   });
   function loaderClose(){
     $("#page-loading").fadeOut('slow');
   }
   setTimeout(loaderClose,10000);
});

 

---

  いかがでしょうか、結構簡単に実装できますのでオススメです。ページローディングが消えるエフェクトですが、今回はフェードアウトを採用していますがこの辺りをこだわってみるのも面白いかと思います。今回のサンプルはこちらに用意していますのでまたご覧ください。