月別アーカイブ: 2013年8月

$(document).ready() と $(window).load() の違い

jQueryで、なるほどっと思ったので記録します。

jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?

$(document).ready(function(){}) の省略系として、$(function(){})と言う書き方もあります。 これは省略しただけなので、全く同じ内容になります。

さて本題です。

まず、$(document).ready() と $(window).load() では実行タイミングが大きく違うようです。 順序でいえば、$(document).ready() が先に実行されて、$(window).load() の方が後に実行される事になります。

ready() は「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」と言うことみたいです。

ready()メソッド DOMツリーの構築が完了した時点で処理を実行する。$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了タグが読み込まれる)時に呼び出される。$(“body”).readyだと、bodyタグが終わったら実行

load()メソッド(onloadイベント) DOMツリーの構築だけでなく、画像などの関連データの読み込みが完了しないと処理を実行しない。 window.onload = function() 最後の記述のみ実行される

ここがよくわからなかった、$(“body”).readyは$(document).readyよりも前に呼び出されると書いてあるのに、load()メソッドより、ready()メソッドの方が先に実行されているのはなぜ?

> ●$(window).load(function() > ・ページ読込開始時点で実行(正確には記述位置に来た時点?) いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$(“body”).readyの後だ。ちなみに$(“body”).readyは$(document).readyよりも前に呼び出される(理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい)。

$(document).readyとloadの違い

上記質問の内容を自分なりに少し変更しています。

両方とも複数記述可能でした。(実験したら両方とも複数記述できました。いいのかな?)

実験

<br /><script type="text/javascript">// <![CDATA[
 $(window).load( function() { alert(' jQuery load1') });
 $(window).load( function() { alert(' jQuery load2') });

window.onload = function(){
 alert('javascript1');
 }
 window.onload = function(){
 alert('javascript2');
 }

$(document).ready( function(){
 alert('jQuery1');
 });

$(function(){
 alert('jQuery2');
 });
// ]]></script><br />

jQuery1 ⇒ jQuery2 ⇒ jQuery load1 ⇒ jQuery load2 ⇒ javascript2 javascript1 は表示されず

 

参考
http://www.tam-tam.co.jp/tipsnote/javascript/post601.html
http://oshiete.goo.ne.jp/qa/8168163.html
http://oretube.blog99.fc2.com/blog-entry-84.html