【jQuery】ロードよりも遅いタイミング指定も!ページ読み込み後に処理を実行する方法とタイミングの違い
jQueryでページを読み込んだら処理を実行するタイミングの記述方法はいろいろあります。
この記事ではそれぞれの記述方法と実行タイミングの違いについてご紹介したいと思います。
ページ読み込み後の記述方法の種類
jQueryでページを読み込み後に処理を実行する記述は大きく分けてready
とload
があります。
そして、この2つの実行タイミングには若干の違いがあり、ready
の方が早くload
の方が遅くなっています。
それではそれぞれの記述方法と詳しい実行タイミングについて見ていきましょう。
ready
ready
の実行タイミングはDOMが完全に読み込まれたタイミングで実行されます。
画像やスタイルシートなどの読み込みが完了していなくてもDOMさえ読み込みが完了したら実行されます。
そのため、HTMLだけを操作する場合はこのタイミングで問題ありません。
しかし、画像やスタイルシートなどの読み込みが完了している保証はないため、それらを操作したい場合はこのタイミングでは早すぎます。
ready
の記述方法はこちら。
$(function(){
// 実行したい処理を記述
});
もしくは
$(document).ready(function(){
// 実行したい処理を記述
});
これらは記述方法の違いだけで実行タイミングは全く同じです。
load
ready
の実行タイミングはWebページの読み込みが完全に完了したタイミングで実行されます。
つまり、ready
のタイミングでは不完全だった画像やスタイルシートなどの読み込みも完了しています。
画像を変更したり、CSSを操作したりする場合は、ready
のタイミングでは早すぎるため、load
のタイミングまで処理を待つ必要があります。
load
の記述方法はこちら。
jQuery2系の場合。
$(window).on('load',function(){
// 実行したい処理を記述
});
jQuery2系の場合。
$(window).load(function(){
// 実行したい処理を記述
});
load
の記述方法はjQueryのバージョンによって異なります。
loadより遅いタイミングにしたい場合は
大抵のことはload
のタイミングで実行すれば正しく動作してくれます。
しかし、稀にload
のタイミングでも早い場合があります。
jQueryにはload
より遅いタイミングで自動実行する処理は無いため、setTimeout()
関数を組み合わせます。
これにより処理タイミングを画面の読み込みが完全に完了してからさらに遅延させることが出来ます。
setTimeout()
関数を組み合わせた記述方法はこちら。
$(window).on('load',function(){
setTimeout(function(){
// 実行したい処理を記述
},100);
});
上のサンプルコードでは、画面の読み込みが完全に完了してからさらに0.1秒後が実行タイミングとなります。
恐らくこのタイミングまで実行タイミングを遅らせることでどんな値での取得出来るはずです。それでも取得出来ない場合は、実行タイミングではなく、プログラム自体に問題がある可能性が高いです。
まとめ
いかがでしたか?
jQueryの実行タイミングは記述方法によって若干の違いがあることが分かりました。
実行したい内容に合わせて適切なタイミングで処理を実行していきましょう。