スクリプトを実行するタイミングを指定する

jQueryで、スクリプトをどのタイミングで実行するようにするか、
いくつか指定することができます。

【1】HTMLが読み込まれたら

$(documet).ready(function()){
  // ここにjQueryの処理
});

もしくは、

$(function(){
  // 処理
});

下は上のショートハンドの記述（簡単に短くしたもの）です。
動きとしては同じで、HTMLDOMが読み込まれたタイミングに実行されます。

【2】ページの読み込みが完了したら

$(window).on('load',function()){

  // ここにjQueryの処理

});

「.on」というメドットを使うことで、
ページの読み込み終わってから処理を実行させることができます。
（ちなみに「.on」というのはjQuery1.7で実装されたものなので、
　それ以降のバージョンのjQueryを読み込んでいる必要があります。）

例えば、ある要素の高さを自動で揃える～みたいなスクリプトを動かしたいとき、
【1】だと画像が読み込まれる前に実行されてしまう可能性があり、
画像分の高さが加味されずに、うまく高さが揃わないことがあります。
そういうときは「ページの読み込みが完了したら」実行させることで、思った通りの挙動になってくれます。

ただ、「ページの読み込みが完了したら」なので、ページの読み込みに時間がかかってしまう場合、
それまではスクリプトが実行されず、（実行するスクリプト・箇所によりますが、）一時的にサイトは崩れたような状態になります。