ページ読み込み時に実行するjavascriptは
指定方法がいくつも存在するため、
複雑になりやすく、度々エラーの原因になります。
【指定方法の種類】
■onloadイベント
ページ読み込み時に実行したい処理がある場合、
通常はjavascriptのonloadイベントを使用します。
BODY要素にonload属性を追加したり、
下記のようなjavascriptの指定を追加する方法がよく見られます。
window.onload = function(){
// ページ読み込み時に実行したい処理
}
■jQueryのreadyメソッド
ライブラリとしてjQueryを使用している場合は、
readyメソッドを使用して、ページ読み込み時にjavascriptを実行することができます。
$(document).ready( function(){
// ページ読み込み時に実行したい処理
});
【onloadイベントとjQueryのreadyメソッドの違い】
ただし、onloadイベントとjQueryのreadyメソッドは
全く同じ動きをするというわけではありませんので、使用する際には注意が必要です。
■処理を実行するタイミングの違い
onloadイベントとjQueryのreadyメソッドは
処理を実行するタイミングが異なります。
jQueryのready()メソッド
DOMツリーの構築が完了した時点で処理を実行する。
onloadイベント
DOMツリーの構築だけでなく、画像などの関連データの読み込みが完了しないと処理を実行しない。
つまり、下記のようなソースがある場合、指定順序に関わらず、
［jQuery］⇒［javascript］
という順でアラートが表示されます。
window.onload = function(){
alert('javascript');
}
$(document).ready( function(){
alert('jQuery');
});
■指定が複数ある場合の違い
onloadイベントは最後に指定したものだけが実行されます。
window.onload = function(){
alert('javascript1');
}
window.onload = function(){
alert('javascript2');
}
このように記述しても
［javascript2］
というアラートしか表示されません。
一方、jQueryのreadyメソッドは、通常、指定したもの全てが順に実行されます。
【その他のTips】
■jQueryのreadyメソッドの省略表記
jQueryのreadyメソッドは下記のように、
省略表記で記述することもできます。
$(function(){
// ページ読み込み時に実行したい処理
});