ページが読み込まれたときにjavascript(jQuery)の処理を実行させたい、といったことはよくあると思います。
今回は、ページにアクセスされ読み込まれた時にjavascript(jQuery)を実行する方法についてですが、このタイミングは２つあります。簡単にコピペで済ませたいところかもしれませんが、実行したい処理によっては期待の効果を全く得られないこともあるので、最後まで読んでぜひ正しい使い分けを習得してください。
html読み込み後に処理を実行する .ready
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ //処理 }); jQuery(function(){ //処理 }); $(function(){ //処理 }); |
これら３つの書き方の意味は同じで、2つ目以降は「.ready」を省略した記述になります。
実行されるタイミングはhtml（DOM）の読み込みが終わった後になります。
javascript(jQuery)の実行方法としてはこちらが通常の書き方ということになります。
画像等のコンテンツ全体の読み込み後処理を実行する .on(‘load’)
|
1 2 3 |
$(window).on('load', function (){ //処理 }); |
画像等のコンテンツ全てが読み込み終わってから処理を実行したい場合は$(window).on(‘load’, function ())を使います。
.readyに比べるとこちらのほうが特殊で、例えば、スライドショーで画像の幅・高さを取得してからでないと動作が難しいものなどがそれにあたります。
まとめ
「.ready」と「.on(‘load’)」の２つの実行タイミングをまとめると次のようになります。
- ページの読み込み開始
- htmlの読み込み終了
- $(document).readyが実行される
- 画像等のコンテンツ全ての読み込み終了
- $(window).on(‘load’, function ())が実行される
「.ready」と「.on(‘load’)」の使い分け方は、
「.ready」でためして、だめなら「.on(‘load’)」くらいがいいかもしれません。
繰り返しになりますが、「.ready」のほうが通常の書き方で「.on(‘load’)」のほうが特殊な書き方という認識で間違いないです。
ちなみに、「.ready」の中に 「.on(‘load’)」を入れて実行させると、「.on(‘load’)」が（jQueryのバージョンにより）実行されないことがあるようなので、「.on(‘load’)」は単独で記述するようにしましょう。
