2012/09/05更新

[JavaScript] onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日は、javaScriptのイベントの一つであるDOMContentLoadedイベントを学んだので、 それについてブログを書きたいと思います。

画像



DOMContentLoadedイベントについて

JavaScriptをページ初期表示時に実行する場合に、loadメソッドを使うことが多いかと思います。
(私はそうでした)
window.addEventListener("load", function(){
  // 初期表示時の処理を書く
}, false);
初期表示時にJavaScriptを動かすなら、loadイベントとあまり考えずに使っていました。
けど、DOMContentLoadedイベントというものがあることを今日知りました。

DOMContentLoadedイベントは、HTML解釈終了時に呼び出されるイベント

onloadイベントは、画像ロードも含んでロードが完了したら呼び出されるメソッド。
DOMContentLoadedイベントは、HTMLの解釈が終わったら呼び出されるメソッドとのこと。
つまり、onloadよりもDOMContentLoadedイベントの方が早く発火するイベントという事です。
jQueryのredyもこのタイミングっぽい(ソースを読んだ限りでは)。

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

DOMContentLoadedのサンプルコード

実際に使う場合のサンプルソースは以下です。
他のイベントと同じようにaddEventListenerなどで、イベントを登録します。
window.addEventListener("DOMContentLoaded", function(){
  // 画面読み込み時の初期処理とか書く。
}, false);


DOMContentLoadedの問題点

IE7,8やSafariの3.1未満はサポートしていないようです(詳しくは、こちら)。
もし古いブラウザも考慮した実装をすべき場合には、jQueryなどのライブラリを利用すると良いかもしれません。
スマホなどの新し目のブラウザの場合には、あまり気にしなくても良いかも。



最後に

イベントって色々なものが定義されているんですね。
またまた勉強になりました。

今回もご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。