jQueryを使ってやってみよう【ローディング画面を実装する Chapter.2】 | 三重県のデザイン会社エコムクリエーション

こんにちは。エンジニアの山岡です。

前回の記事NOW LOADINGって出してみたい【ローディング画面を実装するChapter.1】をまだ読んでいない方はこちらからご覧ください。

さて、今回はjQueryを使ってローディング画面を実装していきます。使い古された方法ですが、むしろ新鮮な気持ちで見ていきましょう。

CONTENTS

1 DEMO
2 HTML
3 CSS
4 JavaScript
5 次回

DEMO

サンプルはこちら

HTML

まずは悪魔の儀式。jQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

読み込み中はローディング画面が表示され、読み込みが完了するとフェードアウトして非表示になり、コンテンツが表示されます。

<!--ローディング画面-->
<div id="loader-bg" class="is-hide">
    <div id="loader" class="is-hide">
        <p>
            <img src="loading.png"><br>
            NOW LOADING
        </p>
    </div>
</div>
<!--コンテンツ-->
<div id="wrap">
    <h1>HELLO!!</h1>    
</div>

CSS

/* 非表示 */
.is-hide {
    display: none;
}
/* LOADING */
#loader-bg {
  background: #ffffff;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
#loader {
  height: 120px;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  position: fixed;
  top: 50%;
  width: 120px;
}
#loader p {
    color: #454545;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}
#loader p img {
    display: inline-block;
}

JavaScript

CSSの.is-hideクラスによってローダーと背景は非表示にしてあります。そこでまず一番初めに、JavaScriptの実行と同時にremoveClass()を使って.is-hideクラスを外すことでローダーの非表示を解除しています。その結果、ローダーが表示されます。

読み込み中はローディング画面が表示され、loadイベントが発火したら非表示になる仕組みです。

ただし、通信状況によってなかなかloadが発火しない可能性もあります。そこで安全策として、setTimeout()を使い、10秒経ったら強制的にローディング画面を非表示にする処理を入れています。

var bg = $('#loader-bg'),
    loader = $('#loader');
/* ローディング画面の非表示を解除 */
bg.removeClass('is-hide');
loader.removeClass('is-hide');

/* 読み込み完了 */
$(window).on('load', stopload);

/* 10秒経ったら強制的にローディング画面を非表示にする */
setTimeout('stopload()',10000);

/* ローディング画面を非表示にする処理 */
function stopload(){
    bg.delay(900).fadeOut(800);
    loader.delay(900).fadeOut(300);
}