【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める!
Ads by Google
jQuery を扱うとき、多くは下記のようなコードで実装していると思います。
$(function() { // ここに処理内容を書く });
ここで使われる「$(function(){〜});
」は略式で、展開すると $(document).ready(){〜});
と同じ意味になります。
また似たようなもので「$(window).load(function(){〜});
」というコードも存在します。
$(document).ready(function() { // ここに処理内容を書く });
$(window).load(function() { // ここに処理内容を書く });
今回説明するのはこの2つのコードの違いについてです。
「$(document).ready()」と「$(window).load()」との違いとは?
まず、セレクタが「document」と「window」という点で異なります。
jQueryメソッドも「ready」と「load」と分かれているので、そもそも違うコードだという点は理解できるかと思います。
しかし、実際の挙動は同じように「見える」んですよね。
では何が違うのか?
そもそも「$(document).ready()」と「$(window).load()」では実行されるタイミングが違います。 順序でいえば、「$(document).ready()」が先に、続いて「$(window).load()」が実行されます。
その理由は以下のとおり。
- [ready] … DOMが構築されたら実行される。
- [load] … 使用される画像などを含め、ページが完全に読み込まれたら実行される。
つまり、ブラウザに表示されている画像の大きさを取得したい場合、「load」ではできますが「ready」ではできない、というワケです。
$(document).ready(function() { // 表示されている画像の大きさを取得 → できない × }); $(window).load(function() { // 表示されている画像の大きさを取得 → できる ○ });
さて。先に説明したように、[$(document).ready(function(){〜});
]は[$(function(){〜});
]と省略できます。
通常、何も考えずにjQueryを書くときは[$(function(){〜});
]で充分ですが、場合によっては臨機応変に[$(window).load(function() {〜});
]を使う必要があることを覚えておきましょう。
こちらの記事もいかがですか?
アナタにオススメ!
同じカテゴリーの他の記事です。
Ads by Google