【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める!

Ads by Google

jQuery を扱うとき、多くは下記のようなコードで実装していると思います。

$(function() {
	// ここに処理内容を書く
});

ここで使われる「$(function(){〜});」は略式で、展開すると $(document).ready(){〜}); と同じ意味になります。
また似たようなもので「$(window).load(function(){〜});」というコードも存在します。

$(document).ready(function() {
	// ここに処理内容を書く
});
$(window).load(function() {
	// ここに処理内容を書く
});

今回説明するのはこの2つのコードの違いについてです。

「$(document).ready()」と「$(window).load()」との違いとは?

まず、セレクタが「document」と「window」という点で異なります。
jQueryメソッドも「ready」と「load」と分かれているので、そもそも違うコードだという点は理解できるかと思います。

しかし、実際の挙動は同じように「見える」んですよね。

では何が違うのか?

そもそも「$(document).ready()」と「$(window).load()」では実行されるタイミングが違います。 順序でいえば、「$(document).ready()」が先に、続いて「$(window).load()」が実行されます。
その理由は以下のとおり。

  • [ready] … DOMが構築されたら実行される。
  • [load] … 使用される画像などを含め、ページが完全に読み込まれたら実行される。

つまり、ブラウザに表示されている画像の大きさを取得したい場合、「load」ではできますが「ready」ではできない、というワケです。

$(document).ready(function() {
	// 表示されている画像の大きさを取得 → できない ×
});

$(window).load(function() {
	// 表示されている画像の大きさを取得 → できる ○
});

さて。先に説明したように、[$(document).ready(function(){〜});]は[$(function(){〜});]と省略できます。
通常、何も考えずにjQueryを書くときは[$(function(){〜});]で充分ですが、場合によっては臨機応変に[$(window).load(function() {〜});]を使う必要があることを覚えておきましょう。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google