jQueryでできる簡易ローディング画面の実装方法

フロントエンド
jQueryでできる簡易ローディング画面の実装方法

簡単なローディング画面は少しのHTML&CSSとjQueryのみで設置することができます。時間短縮としてローディングの画像もジェネレーターで作っちゃいたい!なんていう方のためにおすすめのジェネレーターも紹介しています。
ローディング画面のデモ


ローディング画像の用意


簡単に早くローディング画面を作りたい!という方には下記のようなジェネレーターサイトの利用をおすすめします。
種類もとても豊富なのでこれといったデザインが決まっていない方や、とりあえず簡易的に実装したいという方はぜひジェネレーターサイトをご利用ください。
もちろんオリジナルのgifアニメーションなどでローディング画像を作るのもアリです!

  • Ajaxload.info
    今回デモで使用しているローディング画面はこちらのジェネーレーターで作成しました。
  • Preloaders world
    かわいいものやお洒落なローディング画面にしたい方はおすすめ
  • Loader Generator
    シンプルなローディング画面にしたい方はおすすめ

ローディング画面の実装

読み込み

まずはCSSとscriptを読み込みます。
jQueryも使用するのでそちらも読み込みます。
今回は2.24のCDNを使用していますが、最新を使いたい方は公式サイトを参照ください。また、ダウンロード版のjQueryの読み込みでもOKです。

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
<div id="loader-bg">
    <div id="loading">
        <img src="loader.gif">
    </div>
</div>

<div id="main-contents">
    <p>ここにはコンテンツが入ります。</p>
</div>

ローディング画面とロード後に見せたいメインとなるコンテンツ
別のdivで括ります。
今回はメインコンテンツには背景色が付いているという場合を想定し、loader-bgというID名を付けてたdiv内に実際のローデイングgif画像を置くdivを置いています。
(コンテンツの背景が白の場合はloader-bgのdivはなくても大丈夫です。)

$(function() {
    var h = $(window).height();  //ブラウザウィンドウの高さを取得
    $('#main-contents').css('display','none');  //初期状態ではメインコンテンツを非表示
    $('#loader-bg ,#loader').height(h).css('display','block');  //ウィンドウの高さに合わせでローディング画面を表示
});

$(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800); //$('#loader-bg').fadeOut(800);でも可
    $('#loader').delay(600).fadeOut(300);  //$('#loader').fadeOut(300);でも可
    $('#main-contents').css('display', 'block'); // ページ読み込みが終わったらメインコンテンツを表示する
});

ローディング画面はフェイドアウトで消えるようにし、自然に見せるようにしています。
最初はメインコンテンツのdisplayをnoneにしておき、ローディング画面が消える動作のあとdisplayをblockにし、表示をしています。
delayメソッドを使用し、少し動作の待機時間を作り、微妙ですが動きに差をつけています。
(ここの数値や有無は個人差の問題なので、なくても大丈夫です。)

まとめ

とりあえず読み込みが終わってない状態を見せたくない....!という方ははぜひ参考にしてみてください〜!
下記は今回載せたソースの全体と、デモになります。

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">

</head>
<body>

    <div id="loader-bg">
        <div id="loading">
            <img src="468.GIF">
        </div>
    </div>

    <div id="main-contents">
        <p>ここにはコンテンツが入ります。</p>
    </div>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

</body>
</html>
#loading{
    position: absolute;
    left: 50%;
    top: 30%;
}

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

body{
    background-color: #ccc;
}

#main-contents{
    text-align: center;
    margin-top: 20%;
}
$(function() {
    var h = $(window).height();
    $('#main-contents').css('display','none');
    $('#loader-bg ,#loader').height(h).css('display','block');
});

$(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#main-contents').css('display', 'block');
});

HTML
JS
CSS
jQuery

この記事の読んだ方におすすめ