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

フロントエンド

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


ローディング画像の用意


自分でもgifアニメーションなどでつくるのも1つの手だと思います。
もっと簡単に早くローディング画面を作りたい!という方には下記のようなジェネレーターサイトの利用をおすすめします。

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

ローディング画面の実装!

読み込み

まずはCSSとscriptを読み込みます。
今回はjQueryを使用するのでそちらも読み込みます。

<script type="text/javascript" src="jquery-1.11.3.min.js"></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').delay(600).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{
|s|    background-color: #ccc;
}

#main-contents{
|s|    text-align: center;
|s|    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');
});

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