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

HTMLが読み込まれたとき　$(document).ready

$(function(){
  //処理
});

jQuery(function(){
  //処理
});

jQuery(document).ready(function(){
  //処理
});

これらは全て同じタイミングで処理が実行される。
実行されるタイミングは「HTML（DOM）の読み込みが終わったとき」である。
HTMLが読み込まれる前はHTMLの操作ができないので通常はこの記述を行う。

画像などコンテンツ全体が読み込まれたとき　$(window).load

$(window).load(function(){
  //処理
});

ただし、HTMLの読み込みが終わったタイミングでは、まだ画像などのコンテンツは読み込まれていない。
そのため、画像が読み込まれなければ正しく動作しないような処理を行う場合は$(window).loadを使用する。

イベントの順番

イベントの順番は下記のようになる。

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

参考URL

jQueryの基本 - $(document).ready
jQueryの読込み「ready」と「load」と「function」の順番について