Stoyan Stefanov「無駄に大変なcssローディング完了のチェック」
phpied.com 2011.3.17のエントリ
When is a stylesheet really loaded?
- link要素でロードイベントの実装がされてたりされてなかったり
- DL完了してないのにノードリストが更新されちゃってたり
- Fxが特に大変
- クロスブラウザな解決方法に「一応」到達してるのでよかった
以下斜め読んだ内容
- cssが読み込み完了後にコールバックをセットする
- おかしい話だが意外と大変でした
- 使えるテクニックは５つ
- link.onloadチェック
- link.addEventLinstener("load")チェック
- link.onreadystatechangeチェック
- document.styleSheetsのlengthをsetIntervalで監視
- 特定DOM要素のstyle情報が更新されるかをsetIntervalで監視
- reflow/repaintのキューがかかるのを地味に判定する
- ５つめのやつはできればさけたいので、１〜４でうまくいくか試した
- IE
- できた
- load/readystatechangeイベント発火する
- WebKit/Chrome
- できた
- イベント発火しない（load/readystatechange）
- DL完了後にdocument.styleSheetsのlengthを更新する
- Opera
- できた
- load/readystatechangeイベント発火する
- DL完了してないのに、ocument.styleSheetsのlengthを更新してしまうので注意
- Fx
- だめでした
- イベント発火しない（load/readystatechange）
- DL完了してないのに、ocument.styleSheetsのlengthを更新してしまう
- Fxでは特定DOM要素のスタイル情報監視すればOKしかない？
- Fxは早くloadイベントをlink要素に実装してほしい
- というか、src/hrefで外部リソースをロードする要素にloadイベントの実装はすべてのブラウザで必要な話
コメント欄のやり取りからFxでもましな方法で解決できることが判明
- style要素つくって「@import」ディレクティブ使ってcssロード
- style.sheet.cssRulesが更新されるかを監視
