Syoichi's Tumblr

hamalog:

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のタイミングがどうとかがなんかめんどいらしい。

• DOMContentLoaded and stylesheets - molily

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読み込みは先に！ってことみたいです。
いつも無意識でそうしてたけどしらなんだ。っていうか結構みんな知らないと思うたぶん…。