2016/04/03

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');
});




参考サイト




以上

written by @bc_rikko

0 件のコメント :

コメントを投稿