DOMContentLoadedイベントについて

JavaScriptをページ初期表示時に実行する場合に、次のようにloadメソッドを多用していました。

window.addEventListener("load", function(){

  // 初期表示時の処理

}, false);

初期表示時にJavaScriptを動かすなら、loadイベントとあまり考えずに使っていましたが、DOMContentLoadedイベントというものがあることを知りましたので忘れないよう記録しておきます。

loadイベントは、画像ロードも含んでロードが完了したら呼び出されるメソッドですが、 DOMContentLoadedイベントは、HTMLの解釈が終わったら呼び出されるメソッドです。
つまり、loadよりもDOMContentLoadedイベントの方が早く発火するイベントという事で、 jQueryのredyと同様です。

画像表示が多いページでは、画像ロードに時間はかかるけど、 初期表示時のJavaScript実行は早めにやりたいといった時には、DOMContentLaodedメソッドを使うと便利です。

document.addEventListener("DOMContentLoaded", function(){

  //  DOM の構築が終わったタイミングでの処理

}, false);

注意点はIE7,8やSafariの3.1未満はサポートしていないことです。