【メモ】jQueryでloading画面を表示する

CSSとJQueryを読み込む。

index.html

<div id="loader-bg">
  <div id="loader">
  　<img src="images/load.gif" alt="Loading..." />
  　<p>Loading...</p>
  </div>
</div>
<div id="contens">
  <p>読み込み完了しました。</p>
</div>

script.js

$(function() {
    var h = $(window).height(); // ブラウザウィンドウの高さを取得する
    $('#contents').css('display','none'); // コンテンツを非表示にする
    $('#loader-bg ,#loader').height(h).css('display','block');//ローディング画像を表示
});
$(window).on('load', function () { // 読み込み完了したら実行する
    $('#loader-bg').delay(900).fadeOut(800);// ローディングを隠す
    $('#loader').delay(600).fadeOut(300);
    $('#contens').css('display', 'block');// コンテンツを表示する
});

style.css

#loader-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #2b365c;
    z-index: 1;
}
#loader {
    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: 2;
}
#contens{
    text-align: center;
    margin-top: 30%;
    font-size: 20px;
    color: white;
}

body {
    background-color: #2b365c;
}

ローディング画像はここで作成。
http://loadinfo.net/

結果