JavaScript実行のタイミング

JavaScriptが実行される位置よりも後にid指定された要素、例えばgetElementById()なんかが記述されていると、その要素が取得出来ないということをつい最近知りました。これも、最近ちょこちょこと勉強させていただいているこの書籍のおかげです。

そのまんま？素直に対応すると、そのid指定された要素の後ろにJavaScriptを記述すればいいっていうことになるのですが、これだとソースの可読性、メンテナンスにもあまりよろしくない。これを解消するには、window.onloadというのを使って、ページが全て読み込まれてからJavaScriptが実行されるようにすればよいみたいです。（これならどこにJavaScriptを記述しても問題ない）

window.onload = function (){
	//
};

じゃ、これでなんでもオッケーかなと思っていたら、そういうもんでもないみたいで、これはこれで弊害みたいのがあるそうです。そのページのファイルサイズがけっこうな容量だったりすると（ファイルサイズがおっきな画像とかを使ってたり）それらも全部含めて読み込んでからでないとJavaScriptのコードが実行されないと。なるほどなるほど、それはたしかにそうですね。

この問題点を解消するのが、これまた最近ちょろちょろと触れているjQueryというとっても便利なライブラリで、jQueryではページの内容が読み込まれるのを監視して、該当の要素が操作可能な状態になるとJavaScriptの処理が実行されるっていうものが用意されているそうです。

$(document).ready(function){
    //
}

とか

$(function(){
    //
})

っていうのが、そうらしいです。ネットで親切に解説してくれているサンプルも多いサイトはたくさんあるので、jQueryについてもこれから色々と勉強したいと思う今日この頃です。

しかし、道は長いのであった。