addEventListenerの「DOMContentLoaded」と「load」の読み込みタイミング

◆addEventListener「DOMContentLoaded」と「load」

DOMContentLoaded

DOMツリーの読み込み後（HTMLの文書が完全に読み込まれた後）に起動されます。（画像ファイルは含まれません）

このとき、スタイルシートの読み込みは待たないですが、遅延や非同期でないスクリプトの場合で既に解釈できるスタイルシートがあれば読み込みを待ちます。

コード例

JavaScript

document.addEventListener('DOMContentLoaded', function(){
 ここで処理を行う
});

load

DOMツリー、css、画像などが読み込まれた後に起動されます。

コード例

JavaScript

window.addEventListener('load', function(){
 ここで処理を行う
});

◆読み込みタイミング【動作サンプル】テスト準備

実際に下記の場所にそれぞれjsファイルを外部ファイルとして置き、読み込む順番を表示させてみます。

<head>～</head>要素内　→　load-head.js
ここで読み込み　→　load-content.js
</body>の直前　→　load-foot.js

ファイルを別けていますが、中身はほぼ同じです。
（headで読み込むファイルに共通処理が置かれていることと、引数が違う程度）

コード例 - Sample

HTML

<html>
<head>
～
<script type="text/javascript" src="【ファイルパス】load-head.js"></script> //head内での読み込み
</head>
<body>

～

<script type="text/javascript" src="【ファイルパス】load-content.js"></script> //コンテンツ内の「ここで読み込み」での読み込み

～

<script type="text/javascript" src="【ファイルパス】load-foot.js"></script> //body終了直前での読み込み
</body>
</html>

JavaScript　（load-head.js）

▶このファイルに共通で使う、変数・関数をまとめています ▶全体の読み込み順を見やすくいように変数（all_count）を設置 ▶読み込んでいるファイルが分かり易いように、loadTimingTest関数の引数に（head）の引数を渡しています

//↓ここから共通で使用する変数と関数
let all_count = 0; //順番カウント用変数

function loadTimingTest(a,b){
 console.log( '(' + all_count + ')【' + a + '】--> ' + b );

 all_count = all_count + 1; //順番付けカウントを+1づつ加算
}
//↑ここまで共通で使用する部分

loadTimingTest('head', 'nothing');

document.addEventListener('DOMContentLoaded', function(){
 loadTimingTest('head', 'DOMContentLoaded');
});

window.addEventListener('load', function(){
 loadTimingTest('head', 'load');
});

JavaScript　（load-content.js）

▶読み込んでいるファイルが分かり易いように、loadTimingTest関数の引数に（content）の引数を渡しています

loadTimingTest('content', 'nothing');

document.addEventListener('DOMContentLoaded', function(){
 loadTimingTest('content', 'DOMContentLoaded');
});

window.addEventListener('load', function(){
 loadTimingTest('content', 'load');
});

JavaScript　（load-foot.js）

▶読み込んでいるファイルが分かり易いように、loadTimingTest関数の引数に（foot）の引数を渡しています

loadTimingTest('foot', 'nothing');
							
document.addEventListener('DOMContentLoaded', function(){
 loadTimingTest('foot', 'DOMContentLoaded');
});

window.addEventListener('load', function(){
 loadTimingTest('foot', 'load');
});

◆動作サンプル【sample】

console画面を開いて、ブラウザの再読み込みボタンをクリックします。
（chromeの場合、「画面上で右クリック」→「検証」→「Console」に表示されます）

処理が行われた順に、console画面に表示されます。

サイズの大きい画像（5Mほど）を設置して「DOMContentLoaded」と「load」の違いを分かり易くしています。

画像読み込みが「DOMContentLoaded」の後になるので「DOMContentLoaded」と「load」の表示に時間差ができているのが分かると思います。

head内で読み込んでも、</body>直前で読み込んでも、「addEventListener無し」→「DOMContentLoaded」→「load」の順に読み込まれるのが分かります。