JavaScriptを必ずCSSの後に読み込ませるべき理由とは?
2013/12/14
プログラムが得意でない方でもライブラリを通じてJavaScriptを利用しているかと思います。
そのスクリプトを読み込む際にscript要素を使いますが、見落としがちな罠が潜んでいます。まずはその問題のソースコードをご覧ください。
問題のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>.itemの高さを取得するサンプル</title> <script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ console.log($(".item .body").height()); }); </script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="item"> <div class="body"> ・・・ </div> </div> </body> </html>
/* style.css */ .item .body { height:150px; }
このサンプルは.item .bodyセレクタの高さを取得するだけの単純なソースコードです。
.item .bodyセレクタにはheight:150pxが設定されている為、consoleで出力される値は150のはずです。
私のローカル環境ではIEやFirefoxでは期待通りの値が出力されました。しかしChromeやSafariでは期待の値が取得できないことが何回かありました。
何故このような問題が起こるのか?
どうやらscript要素はlink要素よりも後に記述しないと、スタイルシートが適用される前の要素の状態が取得されることがあるようです。ちなみにIE、Firefoxでは150が取得できましたが、Chromeでは16、Safariでは20が取得されることが何度かありました。
なお、この問題は外部スタイルシートを読み込む場合のみに発生し、style要素を使ってインラインにCSSを記述する場合には確認できませんでした。
ちなみに私は先日この問題に遭遇したのですが、制作の終盤になってからの遭遇だった為、原因がなかなか分からず苦労しました。。。
リロードする度に取得できる値が変わるって場合はこの問題を疑ってみてください。
また、script要素をhead要素内に記述するとページの表示が遅延され体感速度の低下に繋がる為、</body>の直前に記述するのが好ましいとされています。
いかがでしたでしょうか?
参考にして頂けると嬉しいです!