WEBTODESIGN

【JavaScript】読み込み終了後も、ページを開いてから最低3秒はローディング画面が表示されるようにする

ページを読み込んでから、ページを表示してほしい場合。

かつ、3秒以上経っていたらそのままローディングアウトしてほしいけど、3秒経っていなければ累計3秒待ってから表示したい。
ローディングにロゴを出してるけど、読み込みが早すぎてロゴが一瞬しか表示されないのは困る…そんな時。

JavaScriptを使用して実現しました。読み込み完了にかかった時間が3秒未満か以上で分岐するという流れです。

コード全体

ローディング画面をsection-loading（任意のワード）クラスで作り、画面を覆っているという前提です。ローディングを終わる場合はloaded（任意のワード）クラスをつけると消えるCSSを設定しています。以下のコードは最低限確認に必要な部分のみ記述しています。

HTML

<div class="section-loading"></div>

CSS

.section-loading{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    z-index: 999;
    transition: opacity 2s;
}
.section-loading.loaded{
    opacity: 0;
    pointer-events: none;
}

JavaScript

///// ローディング /////
const loadingEvent = () => {
    const spendTime = performance.now();
    const waitTime = 3000;

    const loading = document.querySelector('.section-loading');
    const loadEvent = () => loading.classList.add('loaded');

    if(spendTime > waitTime) loadEvent();
    else {
        const remainingTime = waitTime - spendTime;
        setTimeout(() => loadEvent(), remainingTime);
    }
}
window.addEventListener('load', loadingEvent);

簡単な解説

簡単に解説していきます。

読み込み後に動作

まず、これからの全ての動作は、ページの読み込みが完了してから行います。ですので、loadイベントを用意します。

const loadingEvent = () => {
    //ページの読み込みが完了してから実行する内容
}
window.addEventListener('load', loadingEvent);

loadイベントは、ページ全体がcssや画像などの全てのリソースを読み込んだ場合に発生します。

時間の取得・設定

次に、読み込みにかかった時間をspendTime（任意のワード）、最低限待機したい時間をwaitTime（任意のワード）に入れます。

const spendTime = performance.now();
const waitTime = 3000;

performance.now()は、コンテキストが生成された時点からの経過時間です。つまり、ページを表示してからの時間と考えて良いようです。

waitTimeはミリ秒にします。3000の場合は3秒です。

ローディングの終了処理

そして、HTML・CSSで準備したローディング画面であるsection-loadingを取得し、そこにloadedクラスを付与する設定をします。次からの分岐の両方で同じ動作をするので、loadEvent（任意のワード）という関数に入れてあります。

const loading = document.querySelector('.section-loading');
const loadEvent = () => loading.classList.add('loaded');

条件分岐

最後に、条件分岐です。spendTimeとwaitTimeを比較します。

if(spendTime > waitTime) {
    //経過時間（spendTime）が規定時間（waitTime）を超過している場合の処理
} else {
    //経過時間（spendTime）が規定時間（waitTime）未満の場合処理
}

経過時間（spendTime）が規定時間（waitTime）を超過している場合は、そのままローディング画面は終了なので、以下のように。

if(spendTime > waitTime) loadEvent();

経過時間（spendTime）が規定時間（waitTime）未満の場合は、規定時間が過ぎてからローディング画面を終了させたいので、以下のように。

else {
    const remainingTime = waitTime - spendTime;
    setTimeout(() => loadEvent(), remainingTime);
}

remainingTimeに、規定時間から経過時間を引いた数字を代入します。これで、規定時間までの残りの時間が分かります。

そして、setTimeoutを使用し、残り時間（remainingTime）後にローディングを終了させます。

まとめ

これらをまとめると、以下になります。

///// ローディング /////
const loadingEvent = () => {
    const spendTime = performance.now();
    const waitTime = 3000;

    const loading = document.querySelector('.section-loading');
    const loadEvent = () => loading.classList.add('loaded');

    if(spendTime > waitTime) loadEvent();
    else {
        const remainingTime = waitTime - spendTime;
        setTimeout(() => loadEvent(), remainingTime);
    }
}
window.addEventListener('load', loadingEvent);

以上で、読み込み終了後も、ページを開いてから最低3秒はローディング画面が表示される処理ができました！

RECOMMENDATION

NEWEST