jQuery.ready() は onload より先に呼ばれる。

Programming

2012.03.142017.06.03

はまったのでメモ。

たとえばこんな感じで jQuery.ready と onload を両方いれた場合、jQuery.ready のほうが先に呼ばれる。

<head>
<script>
$(document).ready(function() {
    console.log('jQuery.ready()');
}
</script>
</head>
<body onload="console.log('onload');">
</body>

jQuery.ready はDOMツリーの構築が終了した時に呼ばれる、onload は画像の読み込みも終了した段階で呼ばれる。という違いがあるようだ。

参考URL

jQueryのreadyメソッドはonloadイベントより前に呼ばれる at HouseTect, JavaScriptな情報をあなたに

最近 JavaScript 使う機会があったのだが、
jQuery.offset() などで要素の位置を取得しようとした場合に、画像の読み込みが終わる前に jQuery.ready() が呼ばれ、画像の高さ分を無視した値を取得していたために挙動が想定とずれてしまう。
という事があった。

しかも IE,Firefox,Opera は画像サイズもキャッシュしているのか、現象が再現しきれなかったので余計に解決に時間がかかってしまった。

たとえばこんなページ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    console.log($('#hoge').offset().top);
});
</script>
</head>
<body onload="console.log($('#hoge').offset().top);">
<img src="example.png">
<p id="hoge">hoge</p>
</body>
</html>

chrome では 1個目と2個目で値が違うが Firefox では同じ値が出てくる。

この場合、画像に対して高さを定義してやると想定通りの挙動をしてくれる。

- <img src="example.png">
+ <img src="example.png" style="height:480px;">

これでOK

開発したアプリなど一覧

jQuery.ready() は onload より先に呼ばれる。

コメント