css - 在加载 css 之前，Chrome 不会设置动画

Question

在我的脑海中，我包含了用于加载动画的非常小的 css 文件。我正在下载大型 Angular2 应用程序，我想显示加载。我的经验是，在从服务器加载所有 css 之前，动画不会开始。

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

我尝试加载 vendor.css与 async , defer , async defer .试图把它放在 </body> 之前标签。我什至尝试用 gif 替换动画。同样的事情，gif 显示时 vendor.css已加载。
在开发人员工具的网络选项卡中，我选择慢速 3G。那一刻vendor.css文件加载动画开始。如果我删除 vendor.css来自 html 的动画立即开始。

如何在加载其他 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>

但它不能解释我在问题中描述的 Chrome(也可能是其他浏览器)行为。