ktykwsk.com

DOMContentLoadedとloadイベントの違い

DOMContentLoaded と load イベント。

どちらもページの読み込み完了時に発火するイベントですが、2つには明確な違いがあります。

違いを整理する為にメモしておきます。

DOMContentLoaded イベント

DOMの読み込み完了時に発火。
ざっくり考えると、jQueryの$(function(){});と同様。

load イベント

DOMの読み込み完了に加え、ページ内のリソース(画像等)の読み込み完了時に発火。

使い分けのポイント

例えば、ページ表示時に画像の情報を取得して処理を行う場合はloadイベント、そういった処理が必要無い場合はDOMContentLoadedイベントを用いるとよいでしょう。