ローディングの実装を備考録として記録します。

要件

jQueryでローディング実装

手順

1.head内にjQuery元読み込み

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

2.html
はじめローディング画像を描画させて
時間がきたらcontentsクラスが描画されます。

<div id="loader-bg">
  <div id="loading">
    <img src="img/loading_A.gif"><!-- パス名は適宜変更 -->
  </div>
</div>

<div class="contents"><!-- クラス名は適宜変更 -->
  コンテンツ
</div>

ローディング画像サンプルダウンロード

3.jQueryでロジック実装

$(function(){

  let h = $(window).height();
  $('#loader-bg ,#loader').height(h).css('display','block');

  $(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
  });

});

4.css

  #loading{
    position: absolute;
    left: 50%;
    top: 30%;
  }
  #loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1000;
  }

完成形

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>ローディングサンプル</title>
<style>
  #loading{
    position: absolute;
    left: 50%;
    top: 30%;
  }
  #loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1000;
  }
</style>
</head>
<body>
<div id="loader-bg">
  <div id="loading">
    <!-- ローディング画像サンプル: https://ferret-plus.com/3878 -->
    <img src="img/loading_A.gif"><!-- パス名は適宜変更 -->
  </div>
</div>

<div class="contents"><!-- クラス名は適宜変更 -->
  コンテンツ
</div>

<script type="text/javascript">
$(function(){

  let h = $(window).height();
  $('#loader-bg ,#loader').height(h).css('display','block');

  $(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
  });

});
</script>

</body>
</html>

今はjsとcssも同じファイルに書いてますが、
実際使用する際は切り離してご使用ください。

[jQuery] ローディング備考録

要件

手順

完成形