メモ：Webページにローディングを実装する

例えばランディングページなど、画像をふんだんに使用したWebページを作る時、ページがなかなか読み込まれなくてストレスを感じさせてしまうシチュエーションって、少なからず存在する。
このストレスを少しでも軽減させるために、最近はローディングの演出を組み込むケースが多くなってきた。

このローディング演出の実装方法について、なんとか把握する事ができたので、メモ。

参考にしたページ

jQueryでページローディング機能を実装する | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-

HTMLとJavaScriptの記述例

<body>
<!-- ▼ローディング画面 -->
<div id="loader-wrap">
<div id="loading"><img src="_img/loading.gif"></div>
</div>

<!-- ▼コンテンツ（最初は隠しておく箇所） -->
<div id="wrap">
ここにコンテンツが入ります
</div>

<!-- ▼jQueryの読み込みとJavaScriptの記述 -->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// ▼ページの要素をすべて読み込み終わったら発動
   $(window).on('load',function(){
     $("#loader-wrap").delay(1000).fadeOut('slow');
   });
// ▼読み込みが完了する前に10秒経過したら自動的にロード画面を解除
   function loaderClose(){
     $("#loader-wrap").fadeOut('slow');
   }
   setTimeout(loaderClose,10000);
});
</script>
</body>

ローディング画面のCSSの記述例

#loading{
    position: absolute;
    left: 50%;
    top: 30%;
}

#loader-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #FFF;
    z-index: 10000;
}