jQueryのreadyとloadの違いをいつまで経っても覚えられないのでメモ。
jQueryバージョンによって書き方いろいろあってほんとややこしい。
現時点の最新バージョン3.0で推奨される構文と一緒に残します。
目次
- 1. ready処理
- 2. load処理
- 3. readyとloadの使い分け
ready処理
ready処理の構文。書き方が違うだけで、全て同じ動作をします。③が推奨構文。
/* ① 一切省略しない書き方(非推奨) */
jQuery(document).ready(function() {
//処理
});
/* ② ①のjQueryを$に省略した書き方(非推奨) */
$(document).ready(function() {
//処理
});
/* ③ documentもreadyも省略した書き方(jQuery3.X以降、推奨) */
$(function() {
//処理
});
ready処理は、
HTML要素(画像などのファイルデータを除く)を読み込んだ後、実行されます。
divとかpとかですね。(いわゆるDOMというやつ・・・)
効率的な書き方
function()はまとめてOK。何度も書く必要はなし。
/* 無駄な書き方 */
$(function() {
//処理①
});
$(function() {
//処理②
});
$(function() {
//処理③
});
/* 効率的な書き方 */
$(function() {
//処理①
//処理②
//処理③
});
body閉じタグ直前のscriptタグの場合
HTMLは上から順番に読み込まれます。
なのでbody閉じタグ直前に書く場合は、自動的にHTML要素が読み込まれた後なので、
$(function(){ }は書く必要なしです。
<body>
・
・
・
<script type="text/javascript">
// そのまま処理書く
</script>
</body>
load処理
loadの構文。これも全部同じ処理。②が推奨構文。
/* ① jQuery2.X以前の書き方 */
$(window).load(function(){
//処理
});
/* ② jQuery3.X以降の書き方 */
$(window).on('load', function() {
//処理
});
load処理は、
ready処理で読み込んだHTML要素に加えて、画像などのファイルデータも読み込んだ後、実行されます。
readyとloadの使い分け
まとめると、
ready処理
「HTML要素読み込み後」、実行される
load処理
「HTML要素読み込み + 画像などのファイルを読み込んだ後」、実行される
なので、基本的にはready処理で記載。
画像データが必要な処理がある場合のみ、load処理で記載する。