ONZE/BLOGオンズ開発ブログ

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

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

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

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

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

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

「$(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() {〜});］を使う必要があることを覚えておきましょう。