読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

Stoyan Stefanov「無駄に大変なcssローディング完了のチェック」

斜め読み

phpied.com 2011.3.17のエントリ

When is a stylesheet really loaded?

  • link要素でロードイベントの実装がされてたりされてなかったり
  • DL完了してないのにノードリストが更新されちゃってたり
  • Fxが特に大変
  • クロスブラウザな解決方法に「一応」到達してるのでよかった
以下斜め読んだ内容
  • cssが読み込み完了後にコールバックをセットする
    • おかしい話だが意外と大変でした
  • 使えるテクニックは5つ
    • link.onloadチェック
    • link.addEventLinstener("load")チェック
    • link.onreadystatechangeチェック
    • document.styleSheetsのlengthをsetIntervalで監視
    • 特定DOM要素のstyle情報が更新されるかをsetIntervalで監視
      • reflow/repaintのキューがかかるのを地味に判定する
  • 5つめのやつはできればさけたいので、1〜4でうまくいくか試した
  • 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しかない?
    • loadイベント発火するobject要素経由でcssでロードして、link要素で読み込みし直す。これも大変
    • 「document.styleSheets[2].cssRules」の監視も試したが、CDNにホストしてるcssだとうまくいかない
  • Fxは早くloadイベントをlink要素に実装してほしい
  • というか、src/hrefで外部リソースをロードする要素にloadイベントの実装はすべてのブラウザで必要な話
コメント欄のやり取りからFxでもましな方法で解決できることが判明
  • style要素つくって「@import」ディレクティブ使ってcssロード
  • style.sheet.cssRulesが更新されるかを監視