【jQuery】readyとloadの構文と違い（jQuery3.0以降）

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処理で記載する。