ページ(HTML)の表示・読み込み(load)時に実行されるJavaScriptのイベントまとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ページ(HTML)の表示・読み込み(load)時に実行されるJavaScriptのイベントについて解説していきます。

1 scriptタグの該当関数まで到達したらすぐに実行する関数
- 1.1 即時関数: (()=>{・・・処理内容・・・})();
2 HTMLが読み込み完了したら実行する関数
- 2.1 document.addEventListener(‘DOMContentLoaded’, ()=> {・・・処理内容・・・})
3 HTMLや画像など、すべてのデータの読み込みが完了したら実行される関数
4 Sample-Code-全文
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 Twitterやってます！Follow Me！
8 参考・引用
9 最近の投稿

scriptタグの該当関数まで到達したらすぐに実行する関数

即時関数: (()=>{・・・処理内容・・・})();

即時関数は、記述されているscriptタグまで、読み込みが到達した時点で即座に実行されます。

アロー関数バージョンの記述は頑張ると1行で記述できてカッコいいです。

 // 1. 即時関数
(function (){
　　console.log('すぐに実行される-即時関数🔥');
})();

// 2. 即時関数 Ver. Arrow-Function
( ()=> console.log('すぐに実行される-即時関数 Ver. Arrow-Function🔥') )();

HTMLが読み込み完了したら実行する関数

document.addEventListener(‘DOMContentLoaded’, ()=> {・・・処理内容・・・})

document.addEventListener(‘DOMContentLoaded’) は、HTMLが読み込まれた時点で実行されます。

ただし、画像などは待ちません。ここがポイントです。

基本のHTMLができあがった段階で何か処理をしておきたい場合は、これを使います。

また、複数の記述がある場合はすべて実行されます。

// 1. document.addEventListener('DOMContentLoaded')
// HTMLが読み込まれた時点で実行される。（画像などは待たない）
document.addEventListener('DOMContentLoaded',()=> {
// HTMLが読み込まれた時点で実行したい処理を記述する！

  console.log('HTMLが読み込まれた時点で実行する、だが、画像、お前は待たない🔥');
  console.log('document.addEventListener(DOMContentLoaded, 無名関数');
});

HTMLや画像など、すべてのデータの読み込みが完了したら実行される関数

window.onload = ()=> {・・・処理内容・・・}

window.onload() は、HTMLや画像など他のすべてのデータの読み込みが完了した時に実行されます。

複数ある場合は、最後の処理が実行されるので注意が必要です。

// 1. window.onload() : HTMLや画像など他のすべてのデータの読み込みが完了した時に実行される。
window.onload = ()=> {
  console.log('すべての読み込み完了！ window.onload() First🔥');
};

// 2. window.onload() : 複数ある場合は、最後の処理が実行される。
window.onload = ()=> {
  console.log('すべての読み込み完了！ window.onload() Last🔥');

  console.log('複数ある場合は、最後に登録された「 window.onload() 」処理が実行される🔥');
};

document.body.onload = ()=> {・・・処理内容・・・}

基本的にwindow.onloadと同じ挙動のようです。

ただし、ブラウザによって挙動が違う場合があるとのことなので、こちらよりwindow.onloadを使用する方がよさそうです。

document.body.onload = function() {
    console.log('すべての読み込み完了！ document.body.onload()');
};

window.addEventListener(‘load’, ()=> {・・・処理内容・・・})

window.addEventListener(load) は、HTMLや画像など他のすべてのデータの読み込みが完了した時に実行されます。

ここまでは、window.onload() や document.body.onload()と一緒ですが、1つ重要な違いがあります。

それは、複数ある場合はすべて実行される点です。

なので、すべてのデータの読み込みが完了した時に複数のEvent処理を設定する場合は、window.addEventListener(load) を使用するのがよさそうです。

// 1. window.addEventListener(load)
// HTMLや画像など他のすべてのデータの読み込みが完了した時に実行される。

window.addEventListener('load', ()=> {
  console.log('すべての読み込み完了！ window.addEventListener(load) First🔥');
});

// 2. window.addEventListener(load) : 複数ある場合はすべて実行される。
window.addEventListener('load', ()=> {
  console.log('すべての読み込み完了！ window.addEventListener(load) Last🔥');

  console.log('複数ある場合はすべて実行されるのが「 window.onload() 」との違い🔥');
});

Sample-Code-全文

Sample-Code全文を掲載します。コンソールで実行するとこんな感じです。ぜひ試してみてください。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RunTiming-Test🔥</title>
    <script>

        // 1. window.onload() : HTMLや画像など他のすべてのデータの読み込みが完了した時に実行される。
        window.onload = ()=> {
            console.log('すべての読み込み完了！ window.onload() First🔥');
        };

        // 2. window.onload() : 複数ある場合は、最後の処理が実行される。
        window.onload = ()=> {
            console.log('すべての読み込み完了！ window.onload() Last🔥');

            console.log('複数ある場合は、最後に登録された「 window.onload() 」処理が実行される🔥');
        };

        // 3. window.addEventListener(load) : HTMLや画像など他のすべてのデータの読み込みが完了した時に実行される。
        window.addEventListener('load', ()=> {
            console.log('すべての読み込み完了！ window.addEventListener(load) First🔥');
        });

        // 4. window.addEventListener(load) : 複数ある場合はすべて実行される。
        window.addEventListener('load', ()=> {
            console.log('すべての読み込み完了！ window.addEventListener(load) Last🔥');

            console.log('複数ある場合はすべて実行されるのが「 window.onload() 」との違い🔥');
        });
        
        // 5. document.addEventListener('DOMContentLoaded) : HTMLが読み込まれた時点で実行される。（画像などは待たない）
        document.addEventListener('DOMContentLoaded',()=> {
            // HTMLが読み込まれた時点で実行したい処理を記述する！

            console.log('HTMLが読み込まれた時点で実行する、だが、画像、お前は待たない🔥');
            console.log('document.addEventListener(DOMContentLoaded, 無名関数');
        });

        // 6. 即時関数
        (function (){
            console.log('すぐに実行される-即時関数🔥');
        })();

        // 7. 即時関数 Ver. Arrow-Function
        ( ()=> console.log('すぐに実行される-即時関数 Ver. Arrow-Function🔥') )();


    </script>
</head>
<body>
    <h1>JavaScript の実行タイミング-Test-Robotama🔥</h1>

    <h2>JavaScript のページ読み込み時の実行関数を比較するZE✨</h2>

    <ol>
        <li>
            <h3>window.onload = ()=> {・・・処理内容・・・}</h3>
            <p>
                HTMLや画像など他のすべてのデータの読み込みが完了した時に実行される。
                <br>
                複数ある場合は、最後の処理が実行される。
            </p>
        </li>
        <li>
            <h3>document.body.onload = ()=> {・・・処理内容・・・}</h3>
            <p>
                window.onloadと同じ。（ブラウザによって挙動が違う場合あり）
            </p>
        </li>
        <li>
            <h3>document.addEventListener('DOMContentLoaded', ()=> {・・・処理内容・・・})</h3>
            <p>
                HTMLが読み込まれた時点で実行される。（画像などは待たない）
                <br>
                複数ある場合はすべて実行される。
            </p>
        </li>
        <li>
            <h3>window.addEventListener('load', ()=> {・・・処理内容・・・})</h3>
            <p>
                HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。
                <br>
                複数ある場合はすべて実行される。
            </p>
        </li>
        <li>
            <h3>(()=>{・・・処理内容・・・})();</h3>
            <p>
                即時関数
                <br>
                HTMLの準備を待たずに実行する。
            </p>
        </li>
    </ol>

    <h2>参考・引用</h2>
    <ol>
        <li>
            <a href="https://brainlog.jp/programming/javascript/post-470/" target="_blank">
                ページ読み込み後に実行する関数の違い一覧（JavaScriptとjQuery）
            </a>
        </li>
    </ol>

</body>
</html>