【JavaScript】LoadイベントとDOMContentLoadedイベントの違い

LoadイベントとDOMContentLoadedイベントの違いはイベント発火のタイミングです。
・Loadイベントは、すべての読み込みが完了した時点でイベントが発火します。
・DOMContentLoadedイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火します。

HTMLからブラウザに表示するまでの流れの中で二つのイベントがどのタイミングで発火するのか大まかに説明します。

1.ブラウザはグローバルオブジェクトであるWindowオブジェクトを生成します。そしてWindowオブジェクトのプロパティとしてDocumentオブジェクトが生成されます。

2.DocumentオブジェクトはDOMツリーを読み込んでいきます。HTMLの解析が終わるとDOMContentLoadedイベントが発火されます。

3.DOMツリーの構築が完了した後に、画像が読み込まれていきます。読み込みのすべてが完了するとWindowオブジェクトに対してloadイベントが発火されます。

例えば、画像のプレビュー機能を実装するときなどは、Loadイベントではなく、DOMContentLoadedイベントとすることになります。