JavaScript で ローディングを実装する方法

JavaScript で ローディングを実装する方法を紹介します。

JavaScript で ローディングを実装する方法

HTMLはこちら

<div id="loadingElement" class="loading">

    <!-- ローディング要素の中身 -->

</div>

CSSはこちら

.loading {

    /* ローディング中のスタイル */

    /* 例えばローディングアニメーションなど */

}

.loaded {

    /* ローディング完了後のスタイル */

}

JavaScript はこちら

document.addEventListener("DOMContentLoaded", function() { // ドキュメントが読み込まれたら実行

    setTimeout(() => { // 時間を指定

        const loadingElement = document.getElementById('loadingElement'); // IDを指定

        loadingElement.classList.remove('loading'); // loading を除去

        loadingElement.classList.add('loaded'); // loaded を付与

    }, 3000); // 3秒後にloadedクラスを追加

});

紹介したコードは、ページ全体が読み込まれたタイミングで、指定した要素のクラスを loading から loaded に変更します。
具体的な流れは次の通りです。

1. ページが読み込まれると、ローディング要素に loading クラスが付与されます。
2. その後、DOMContentLoaded イベントが発火し、JavaScriptが実行されます。
3. JavaScriptのコードにより、loading クラスが除去され、代わりに loaded クラスが追加されます。
   クラスの除去が必要なければ remove の行は任意で削除してください。

これにより、ページのローディングが完了した後に、特定の要素にスタイルやアニメーションを適用することができます。ぜひお試しください！

JavaScript が無効な場合

JavaScript が無効な場合、ローディングが表示されたままになります。そのため、次のような調整を加えることで対応します。

HTMLはこちら

<div id="loadingElement" style="display: none;">

    <!-- ローディング要素の中身 -->

</div>

JavaScript はこちら

// JavaScriptが有効な場合のみ実行される

document.getElementById('loadingElement').style.display = 'block'; // 要素を表示させる

document.addEventListener("DOMContentLoaded", function() {

    const loadingElement = document.getElementById('loadingElement');

    loadingElement.classList.add('loaded'); // ローディング完了のクラスを追加

});

このコードでは、最初にローディング要素を display: none; で非表示にします。
これで JavaScript が読み込めない状況では要素は最初から非表示になります。
次に JavaScript が有効な場合、スクリプトの冒頭で要素を表示状態に変更します。

まとめ

JavaScript で ローディングを実装する方法を紹介しました。