jQuery:$(document).ready(fn)でハマったこと
2014.11.05
$(document).ready(fn)の実行はCSSが読み込まれた後。
と思い込んでいましたが、実はそんなことはなかったようです。

普通にスタイルシートでページをレイアウトし、
$(document).ready(fn)で要素の位置を取得するようなJavaScriptを書いたのですが、
どうもスタイルが当たる前の位置を取得してしまうようでした。

この時点で
$(document).ready(fn)が実行される = DOMの準備が出来ている = CSSの読み込みも終わっている
という思い込みをしていたのでハマってしまったのですが、
記述の順番次第でCSSの読み込み前にJSが実行されてしまうようです。

英語ですが、こちらのやり取りの中で解説されています。
http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready

CSSの読み込みはJSの読み込みより先に記述しないと保証されないようです。

<link rel="stylesheet" type="text/css" href="aaaaa.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="bbbbb.js">

この順番であれば大丈夫です!

| コメント(0)