JavaScriptのloadとDOMContentLoadedイベントの違い

load

• Webページ内のすべてのソースが完全にロードされたタイミングで発火する
  • HTML だけでなく、画像・CSS・スクリプト・iframe など、ページに紐づくリソースがすべて読み込み終わった時点
  • 画像が重い・外部リソースが多いほど、発火が遅くなる

window に load イベントリスナーを付ける

window.addEventListener('load', () => {
  console.log('すべてのリソースの読み込みが完了した');
});

DOMContentLoaded

• WebブラウザがHTMLを読み込み・解析し終えたタイミングで発火する
  • あくまで「HTMLがどのような構造になっているか」が解析された状態
  • 画像やスタイルシートの読み込み完了は待たない
  • DOM が操作可能になった時点で発火するため、load より早く発火する

document に DOMContentLoaded イベントリスナーを付ける

document.addEventListener('DOMContentLoaded', () => {
  console.log('HTMLの解析が完了し、DOMが利用可能になった');
});

#JavaScript