🛂

【JavaScript】DOMContentLoaded イベント と load イベントの違いについて（備忘録）

に公開
JavaScript
初心者
メモ
tech

１．DOMContentLoadedイベントとは

・①～③の処理が完了し、画面操作が可能になった段階で自動的に発生するイベントです。
　　①．ブラウザがHTMLファイルを読み込む
　　②．読み込んだHTMLファイルの内容を基に、DOMツリーを構築（構文解析）
　　③．<script defer src="…"> や <script type="module"> で定義されたJSファイルの実行
・画像やCSSファイルといった外部ファイル読み込みの完了は待ちません。

２．loadイベントとは

・DOMツリー構築に加えて画像やCSSファイルを含む外部ファイルの読み込み完了後に自動的に発生するイベントです。
・load イベントは、DOMContentLoaded イベントよりイベントの発生タイミングが遅いです。

３．図解すると。。。

DOMContentLoaded イベントと load イベントの発生タイミングの違いを図解します。

※画像は、【JS】 DOMContentLoaded と load の違いを新人でもわかるように解説 よりお借りしました。

４．サンプルプログラム

Sample.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p id="domContent">DOMツリー構築開始</p>
        <p hidden="hidden" id="domContentMsg">DOMツリー構築後に表示</p>
        <p id="load">外部ファイル読み込み開始</p>
        <p hidden="hidden" id="loadMsg">外部ファイル読み込み後に表示</p>
        <script src="Sample.js"></script>
    </body>
</html>
style.css
body {
    background-color: lightskyblue;
}
Sample.js
// DOMツリー構築完了時の処理（自動実施）
document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("domContent").textContent = "DOMツリー構築完了";

    changeHiddenDomContentMsg();

    // 非表示のメッセージを表示
    function changeHiddenDomContentMsg() {
        let domContentMsg = document.getElementById("domContentMsg");

        if (domContentMsg.hidden) {
            domContentMsg.hidden = false;
            domContentMsg.textContent = "外部ファイル読み込み開始";
        } else {
            domContentMsg.hidden = true;
        }
    }
})

// 画像やCSSなどを含むページ全体の読み込み完了時の処理（自動実施）
window.addEventListener("load", () => {
    document.getElementById("load").textContent = "外部ファイル読み込み完了";

    changeHiddenLoadMsg();

    // ページ全体の読み込み完了時に非表示のメッセージを表示
    function changeHiddenLoadMsg() {
        let loadMsg = document.getElementById("loadMsg");

        if (loadMsg.hidden) {
            loadMsg.hidden = false;
            loadMsg.textContent = "全リソース読み込み完了";
        } else {
            loadMsg.hidden = true;
        }
    }
})

５．実行環境

・OS: Windows 11（バージョン 24H2）
・ブラウザ: Microsoft Edge（バージョン 140.0.3485.66）
・エディタ: Visual Studio Code（バージョン 1.104.1）

６．参考

・Document: DOMContentLoaded イベント
・Window: load イベント
・【JS】 DOMContentLoaded と load の違いを新人でもわかるように解説
・ブラウザがHTMLを受け取ってからDOMツリーを構築するまで
・HTML hidden Property による要素の表示・非表示の切り替え

Discussion