onLoadとDOMContentLoadedの違いと実行順序

photo by Judit Klein

いままでHTMLの読み込みが完了してから行う初期処理は、すべてonLoadイベントで行っていた。でもHTML5からはDOMContentLoadedというイベントが使えるようになったらしい。

onLoad と DOMContentLoaded

onLoadとDOMContentLoadedの1番の違いは、イベントが実行されるタイミング。

onLoad

onLoadは、すべてのリソースが読み込まれたら発火するイベント

たとえばHTMLにクッソ重い画像が含まれていた場合、その画像の読み込みが終わるまでイベントが発火しない。

DOMContentLoaded

DOMContentLoadedは、HTMLの解釈が終了した時点で発火するイベント

HTMLが読み込まれてさえいれば、リソースを読み込む前に実行される。
だからクッソ重い画像があったとしても、その読み込みを待たずして処理を続行することができる。

用途としては、リソースの読み込みは後回しにして、JavaScriptを読み込みたい時につかう。
ただし、DOMContentLoadedはHTML5から追加されたイベントのため、古いブラウザ（IE8やSafari3.1など）では使用することができないので注意。

実装例

onLoad

document.addEventListener('onLoad', function (event) {
  // 初期処理
  console.log('event: onLoad');
});

DOMContentLoaded

document.addEventListener('DOMContentLoaded', function (event) {
  // 初期処理
  console.log('event: DOMContentLoaded');
});

参考サイト

• window.onload - Web API インターフェイス | MDN
• DOMContentLoaded - Webテクノロジーのリファレンス | MDN

以上

written by @bc_rikko