Takazudo hamalog

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + /

cool guy

JSの前にCSS読み込まないと色々うまくいかないことがある

2011/12/15 permalink

head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、

  1. link要素でCSS読み込み
  2. script要素でJavaScript読み込み

の順番でやらないと上手くいかないことがあるみたいです。って今日はじめて知りました。

  1. OK(link先script後)
  2. NG(script先link後)

NGの方を何度もリロードすると、ピンクのdivがたまにslideDownしない。自分がこれを確認したのはChrome。ver.16.0.912.63。理由は、link要素を先に書かないと、DOMContentLoad時に外部スタイルシートが適用されてないかららしいです。スタイルシートが適用されてないと要素の高さが0になっちゃっていてアニメーションできなくなってるっぽい。これは、こんなサンプルみたいに、めちゃめちゃシンプルな場合にしか発生しなさそうだけど、そんなことがあるのか…。以下のサイトにそれっぽいことが詳しく書いてありました。パラレルで読み込むとかDOMContentLoadedのタイミングがどうとかがなんかめんどいらしい。

jQueryの.ready()のドキュメントにも、以下のような記述があった。

When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts.

ということで、CSS読み込みは先に!ってことみたいです。
いつも無意識でそうしてたけどしらなんだ。っていうか結構みんな知らないと思うたぶん…。

blog comments powered by Disqus

  1. kellia-springerhamalogからリブログしました
  2. getovertheborderhamalogからリブログしました
  3. kazzxzsyoichiからリブログしました
  4. orihikadotnukeからリブログしました
  5. kgroopesyoichiからリブログしました
  6. wevnotehamalogからリブログしました
  7. hidkicksyoichiからリブログしました
  8. mercuresai10tからリブログして、コメントを追加しました:
    head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、 link要素でCSS読み込み...
  9. shotasakamotosyoichiからリブログしました
  10. maechuuhamalogからリブログしました
  11. roughtabsyoichiからリブログしました
  12. cuonsai10tからリブログしました
  13. sai10tsyoichiからリブログしました
  14. tkyissyoichiからリブログしました
  15. ken0205syoichiからリブログしました
  16. nayutanizedsoramugiからリブログしました
  17. dotnukesyoichiからリブログしました
  18. sarugesyoichiからリブログしました
  19. lugecysyoichiからリブログしました
  20. athsearsyoichiからリブログしました
  21. soramugisyoichiからリブログしました
  22. atm09tdfingaholicからリブログしました
  23. castellxxxsyoichiからリブログしました
  24. garyutenhamalogからリブログしました
  25. stdesignsyoichiからリブログしました
  26. asanonssyoichiからリブログしました
  27. mitakusam337syoichiからリブログして、コメントを追加しました:
    head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、 link要素でCSS読み込み...
  28. cr96syoichiからリブログしました
  29. yameroyosyoichiからリブログしました
  30. fingaholichamalogからリブログしました
  31. ukarsyoichiからリブログしました
  32. syoichihamalogからリブログしました
  33. hamalogの投稿です