jQueryの3つの書き方で実行タイミングの呼び出し順が違う

jQueryの呼び出す時の書き方が何通りかあり、それぞれ実行タイミングが違います。
今回は、皆さんも何度か目にしたと思われる書き方について、どのタイミングで呼び出されるのかをご紹介します。
どれも同じように見えますが、実際には書き方によって動作が違います。

jQueryの呼び出し

例えば、以下のようによく見かける3つの書き方があります。

$(function(){});
$(document).ready(function(){});
$(window).load(function(){});

他にも、[$()]を[jQuery()]と書くこともありますが、ここでは割愛します。
結論から言うと、[$(function(){});]と[$(document).ready(function(){});]は同じタイミングで動きをしますが、[$(window).load(function(){});]は実行タイミングが違います。
参考にしたサイトがとても詳しく解説されていたので引用しています。

jQueryの実行タイミング

上記では3つ記述しましたが、ここからjQueryのreadyとloadに絞って話を進めます。
基本、プログラムは上から下に実行されますが、ここではreadyが先、loadが後に読み込まれるということを紹介しておきます。
具体的な順番は次のようになります。

readyとloadの2つのタイミングは？

どちらもHTMLの読み込みが終わった状態ですが、画像などコンテンツ全体の読み込みが終わったタイミングで実行されるのがloadです。
しかし、単純に順番の問題ではなく、適切に使い分けることが重要です。

例えば、readyの場合は画像が読み込み終わっていないので、CSSで指定していない大きさが可変の画像に対して、幅や高さを取得しようとするとおかしくなります。
以下、jQueryの実行タイミングによっての使い分けの例です。

ready

• HTMLを置き換えるものや、表示するかしないかを制御するもの
  ラジオボタンが選ばれていたら表示するなど
• ウインドウサイズによって決まるもの
  スムーススクロールのコンテンツのポジション取得 など（場合によっては、rezsizeイベントも必要）
• 読み込み時間をカモフラージュするためのアニメーションなど

load

• 画像の大きさを取得するものや、画像の大きさによって可変するもの
• ページ遷移時に表示するアニメーション（特にスマホは、readyにしてしまうと、ページが表示されたときにはもう終わっていたりする…）

今まで何気なく使っていましたが、意識して書くことにします。

• Original:https://minory.org/jquery-timing.html
• Source:Minory
• Author:管理者

Amazonベストセラー