このブログでは、ページの読み込みを少しでも速くするために、外部のCSSライブラリなどは非同期で読み込むようにしていました。
通常は下記のようにCSSを読み込むと思います。

<link rel="stylesheet" href="example.css" />

これを下記のようにして非同期読み込みするわけです。

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="example.css" />

僕は普段からChromeを使っているのですが、念のため、このようにCSSを非同期で読み込む状態のブログをEdgeで確認したら、Font Awesomeが表示されていませんでした。

上の画像はEdgeでこのブログを表示した画面です。
赤枠内にFont Awesomeのアイコンが表示されるはずなのに、表示されていない…。
色々と試行錯誤しましたが、どうも非同期読み込みが影響しているみたいで、rel="stylesheet"で読み込んだらFont Awesomeが表示されるようになりました。

んー、Font AwesomeのCSSだけ非同期できてない…。
これだからマイクロソフト社のブラウザは嫌いです。
何か良い方法は無いかな。


コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。