Skip to content

Instantly share code, notes, and snippets.

@relax-more
Last active August 29, 2015 14:23
Show Gist options
  • Save relax-more/bc642a5d57e74f463b0c to your computer and use it in GitHub Desktop.
Save relax-more/bc642a5d57e74f463b0c to your computer and use it in GitHub Desktop.

What is difference between ready() and load() of jQuery/javaScript

According to this page... http://oshiete.goo.ne.jp/qa/8168163.html

> ■質問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オブジェクトにラップされるが後者はされない。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment