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

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

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

古いバージョンでは $(window).load(function(){〜}); が使えましたが、jQuery3.0 以降では $(window).load(function(){〜}); は使えないので注意してくださいね。

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

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

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

「$(document).ready(function() {});」と「$(window).on('load', function(){});」との違いとは？

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

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

では何が違うのか？

そもそもこの２つは実行されるタイミングが違います。
順序でいえば、「$(document).ready(function(){});」が先に、続いて「$(window).on('load', function() {});」が実行されます。
詳しくは以下のとおり。

  • ［$(document).ready(function(){});］　…　DOMが構築されたら実行される。
  • ［$(window).on('load', function() {});］　…　使用される画像などを含め、ページが完全に読み込まれたら実行される。

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

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

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

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