$(document).readyとloadの違い

質問

■質問1
jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
下記理解で合ってるでしょうか？

●$(document).ready(function()
・複数回実行できる
・ページを全て読み込んだ後に実行
・ページの下部に記述しなくとも良い

●$(window).load(function()
・複数回実行できない(最後の1回が実行される)
・ページ読込開始時点で実行(正確には記述位置に来た時点？)

■質問2
「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？
・どちらも同じ？
「$(window).load(function()」V.S「window.onload = function(){」

回答No.1

anmochi · ベストアンサー

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する（＝htmlの終了タグが読み込まれる）時に呼び出されるからページを全て読み込んだ後に実行しているように見えるのである。
> ・ページの下部に記述しなくとも良い

> ●$(window).load(function()
> ・複数回実行できない(最後の1回が実行される)
こちらも冒頭の解説の通り、window.onload = function()を何回も行うので最後の1個が有効になるのだね。
> ・ページ読込開始時点で実行(正確には記述位置に来た時点？)
いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$("body").readyの後だ。ちなみに$("body").readyは$(document).readyよりも前に呼び出される（理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい）。

> ■質問2
> 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？
> ・どちらも同じ？
> 「$(window).load(function()」V.S「window.onload = function(){」
違う。前者はjQueryオブジェクトにラップされるが後者はされない。

お礼

回答ありがとうございました。
大変参考になりましたー