ページ読み込み時に実行する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(){
// ページ読み込み時に実行したい処理
});