サイトアイコン IT NEWS

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

jquery-timing

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

jQueryの呼び出し

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

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

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

jQueryの実行タイミング

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

  1. ページの読み込みが始まる
  2. HTMLの読み込みが終わる
  3. $(document).readyが実行
  4. 画像など含めすべてのコンテンツの読み込みが終わる
  5. $(window).loadが実行

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

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

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

ready

load

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

モバイルバージョンを終了