jQueryの書き方で読み込み・実行タイミングが違う件

5月 12, 2018

jQueryの呼び出す時の書き方が何通りかあります。
皆さんも何度か目にしたと思います。
どれも同じように見えますが、実際には書き方にって動作が違います。

jQueryの書き出し

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

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

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

引用：jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry

実行する順番

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

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

引用：【jQuery】処理実行タイミング $(document).readyと$(window).load – Qiita

2つの決定的な違いは？

どちらもHTMLの読み込みが終わった状態ですが、画像などコンテンツ全体の読み込みが終わった後に実行されるのがloadです。
しかし、単純に順番の問題ではなく、適切に使い分けることが重要です。
例えば、readyの場合は画像が読み込み終わっていないので、CSSで指定していない大きさが可変の画像に対して、幅や高さを取得しようとするとおかしくなります。
以下、使い分け方の例です。

[ready]

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

[load]

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

引用：$(function(){}) と $(window).on(‘load’,function(){}) の違い – Qiita

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

このブログを検索

Minory