2016.06.26

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

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

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

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

もしくは、

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

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


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

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

  // ここにjQueryの処理

});

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

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

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