cssがロードされるまでクロムがアニメーション化されない

Question

私の頭の中には、アニメーションを読み込むための非常に小さなCSSファイルが含まれています。私は大きなAngular2アプリケーションをダウンロードしています。ロードを表示したいのですが。 私が経験することは、すべてのCSSがサーバーから読み込まれるまで、アニメーションが開始されないということです。

<link rel="stylesheet" href="~/dist/load.css" /> 
<link rel="stylesheet" href="~/dist/vendor.css" /> 

私はasync、defer、async deferでvendor.cssロードしようとしました。 </body>タグの前に配置しようとしました。アニメーションをgifに置き換えることさえしようとしています。同じこと、vendor.cssが読み込まれたらgifが表示されます。
開発ツールの[ネットワーク]タブで[低速3G]を選択します。 vendor.cssファイルが読み込まれる瞬間、アニメーションが始まります。 htmlアニメーションからvendor.cssを削除するとすぐに開始されます。

他のCSSファイルを読み込む前にアニメーションを開始するにはどうすればよいですか？

Answer 1

私は</body>タグの前にこのコードを置くことで解決策が見つかりました：

<script type="text/javascript"> 
    const head = document.head, link = document.createElement("link"); 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    link.href = "/dist/vendor.css"; 
    head.appendChild(link); 
</script> 

をしかし、それは私が疑問に記述クローム（可能な他のブラウザすぎ）の動作を説明していません。