JavaScript ドキュメントの読込完了時に処理を実行する方法

JavaScript を使って、ドキュメントやリソース（CSSや画像など）の読み込みが完了した時に処理を実行する方法を書いていきます。

目次

1. 実行方法
2. 実行順序
3. 使い分け
4. jQueryについて

1. 実行方法

ドキュメントの DOMContentLoaded を使うと、HTMLの読み込み（DOMの解析）が完了した時に処理を実行することができます。

document.addEventListener('DOMContentLoaded', (event) => {
  // 処理を記述
});

また、ウィンドウの load を使うと、全てのリソース（スタイルシートや画像など）が読み込まれた後に処理を実行することができます。

window.addEventListener('load', (event) => {
  // 処理を記述
});

2. 実行順序

上のコードですが、ブラウザで実行される順序は以下の通りになります。

1. HTMLの読込完了（DOMの解析完了）
2. DOMContentLoaded イベント
3. リソースの読込完了（CSSや画像など）
4. load イベント

以下のコードを実行すると、

window.addEventListener('load', (event) => {
  console.log('Window: load');
});

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('Document: DOMContentLoaded');
});

下のログが出力されました。

Document: DOMContentLoaded
Window: load

3. 使い分け

通常は DOMContentLoaded で良いと思うのですが、画像の寸法を取得する場合などは load になりそうです。

また、以下の流れで、読み込み中のメッセージ（Loading... 等）を表示できる気がします。

1. ユーザーがページを開く
2. メッセージの表示（DOMContentLoaded）
3. CSSや画像の読み込み完了
4. メッセージの非表示（load）

4. jQueryについて

jQueryの以下のコードですが、厳密には DOMContentLoaded と少し違うみたいです。

 $(function() {
  // 処理
 });

ウィンドウの load は、jQueryだと以下のように書けると思います。

$(window).on('load', function(e) {
  // 処理
});

参考文献

• Document: DOMContentLoaded イベント - Mozilla
• Window: load イベント - Mozilla
• ready - jQuery API