fbpx
記事一覧へ戻る

脱jQuery！ JavaScriptを使ってやってみよう【ローディング画面を実装する Chapter.3】

2019.05.15

Webサイト制作

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

前回は、jQueryを使って実装【ローディング画面を実装する Chapter.2】というちょっと懐かしい方法をご紹介しました。

それに対して今回は、脱jQueryということで、jQueryを使わずJavaScriptとCSSで実装する方法を見ていきましょう。

DEMO

見た目はjQueryを使っても使わなくても全く同じです（笑）

ローディング画面→読み込み完了
（jQueryを使っても使わなくても見た目は同じ）

サンプルはこちら

HTML

HTMLはjQueryを使う場合（前回の記事）と同じです。

<!--ローディング画面-->
<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

背景とローダーが消えるタイミングをずらすために、.fadeout-bgと.fadeout-loaderのtransition-durationプロパティの値を調整・設定しています。

/* 非表示 */
.is-hide {
    display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
    transition-property: opacity;
    transition-delay: .9s;
    transition-duration: .8s;
    opacity: 0;
    pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
    transition-property: opacity;
    transition-delay: .9s;
    transition-duration: .3s;
    opacity: 0;
    pointer-events: none;
}
/* ローディング画面 */
#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

var bg = document.getElementById('loader-bg'),
    loader = document.getElementById('loader');
/* ロード画面の非表示を解除 */
bg.classList.remove('is-hide');
loader.classList.remove('is-hide');

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

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

/* ロード画面を非表示にする処理 */
function stopload(){
    bg.classList.add('fadeout-bg');
    loader.classList.add('fadeout-loader');
}

解説

jQueryとJavaScriptそれぞれで変わったポイントを解説してきます。

classの付け外し

jQueryでアニメーションさせなくても、CSSを変化させることで同じように様々な表現が可能になります。今回はclassの付け外しを使って、フェードアウトと表示/非表示を実装しています。操作する対象はclass（Element.classList）だけでなくstyle（HTMLElement.style）でも可能です。

jQueryの場合

/* classを追加 */
bg.addClass('is-hide');

/* classを除去 */
/* 前回のサンプルコードより引用 */
bg.removeClass('is-hide');

JavaScriptの場合

/* classを追加 */
/* 上記のサンプルコードより引用 */
bg.classList.add('fadeout-bg');

/* classを除去 */
/* 上記のサンプルコードより引用 */
bg.classList.remove('is-hide');

イベントの登録

イベントの登録には、addEventListener()を使います。（Event​Target​.add​Event​Listener()）今回のコードに当てはめると、「loadしたらstopload（classを追加してローディング画面をフェードアウト）する」というイベントが登録されたことになります。書いておきながらなんですが、ちょっと謎な文章でしたね……

jQueryの場合

/* 前回のサンプルコードより引用 */
$(window).on('load', stopload);

JavaScriptの場合

/* 上記サンプルコードより引用 */
window.addEventListener('load', stopload);

処理の遅延とフェードアウト

jQueryでは、フェードアウトや処理を遅らせる便利な機能がありましたが、JavaScriptでそれは面倒なので、CSSでtransitionを設定しておいたclassの付け外しで対応します。アニメーションを調整したり変更したい時などに後から変更がしやすくなって保守性が上がります。これもjQueryが流行った頃から使われてきた手法ですね。

jQueryの場合

/* 前回のサンプルコードより引用 */
bg.delay(900).fadeOut(800);

JavaScriptの場合

/* 上記サンプルコードより引用 */
bg.classList.add('fadeout-bg');

次回

いかがでしたか。jQueryに慣れてしまっていると、JavaScriptのパワフルさにまるで浦島太郎な人もいるのでは。2000年頃、JSがおもちゃのような扱いを受けていた頃がちょっぴり懐かしいですし、その頃を思い出すとJSの地位が上がってくれて嬉しいです。

さて次回は最終回。少し応用編ということで、色々な種類のローダーやジェネレーターをご紹介していきます。

p.s.
よく似た記事を見つけました！ こちらのブログ「超簡単 javascriptとcssで作る簡易ローディング画面（無口＠work）」も参考にしてみてください！