![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
WebページでJavaScriptを実行する際、「いつ処理を開始するか」は非常に重要です。
その代表的なイベントが DOMContentLoaded と load です。
この記事では、それぞれの違い・実行タイミング・使い分けを、初心者にも分かりやすく解説します。
DOMContentLoadedとは
DOMContentLoaded は、HTMLの読み込みと構造の解析が完了した時点（＝DOMが構築されたタイミング）で発火するイベントです。
画像やCSSなどの外部リソースの読み込みを待たないため、比較的早いタイミングで処理を実行できます。
|
1 2 3 |
document.addEventListener('DOMContentLoaded', function() { console.log('DOMの構築が完了しました'); }); |
ポイント
- HTMLの読み込みと構造の解析完了時に実行される
- 画像・CSSの読み込みは待たない
- 初期化処理に適している
loadとは
load は、ページ内のすべてのリソース（画像・CSS・JSなど）の読み込み完了後に発火するイベントです。
ページが完全に表示された後に処理を実行したい場合に使用します。
|
1 2 3 |
window.addEventListener('load', function() { console.log('すべての読み込みが完了しました'); }); |
ポイント
- 全リソースの読み込み完了後に実行される
- DOMContentLoadedより遅い
- 画像サイズの取得などに適している
DOMContentLoaded と load の違い
主な違いは「実行タイミング」です。
| 項目 | DOMContentLoaded | load |
|---|---|---|
| 実行タイミング | HTMLの読み込みと構造の解析完了時 | 全リソース読み込み完了後 |
| 実行速度 | 早い | 遅い |
| 画像・CSS | 待たない | 待つ |
| 主な用途 | 初期化処理 | 完全表示後の処理 |
使い分けの目安
- HTMLだけで十分：DOMContentLoaded
- 画像なども含めて扱う：load
使い分けのポイント
基本的には DOMContentLoaded を使うケースが多いです。
■ DOMContentLoadedを使う場面
- DOM操作（要素取得・イベント付与）
- 初期表示の制御
- フォーム処理
■ loadを使う場面
- 画像サイズを取得したい
- レイアウト計算が必要
- 完全描画後に処理したい
迷った場合は、まず DOMContentLoaded を選び、必要に応じて load を使い分けると安心です。
よくある注意点
■ スクリプトの読み込み位置
<script> を body の最後に書く場合、すでにDOMが構築されているため、イベントが不要なケースもあります。
|
1 2 3 4 |
<body> <!-- コンテンツ --> <script src="script.js"></script> </body> |
この場合、DOMContentLoadedを使わなくても問題なく動作することがあります。
■ defer属性を使う方法
<script> に defer を付けると、HTMLの解析と並行してスクリプトを読み込み、DOM構築完了後（DOMContentLoadedとほぼ同じタイミング）に実行されます。
|
1 |
<script src="script.js" defer></script> |
- HTML解析をブロックしない
- DOMContentLoadedと同等のタイミングで実行される
- 現在の主流の書き方
そのため、DOMContentLoadedを使わずに実装できるケースも多いです。
■ DOMContentLoadedが発火しないケース
スクリプトの実行タイミングによっては、すでにイベントが終了していることがあります。
その場合は、以下のように分岐すると安全です。
|
1 2 3 4 5 |
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } |
まとめ
- DOMContentLoaded：HTMLの読み込みと構造の解析完了時（高速・基本はこちら）
- load：全リソース読み込み完了後（画像などが必要な場合）