在加载 css 之前，Chrome 不会动画答案

【问题标题】：Chrome not animating until css are loaded在加载 css 之前，Chrome 不会动画
【发布时间】：2018-05-16 08:14:00
【问题描述】：

在我的脑海中，我包含了非常小的 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 文件之前启动动画？

【问题讨论】：

标签： css angular google-chrome animation

【解决方案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（也可能是其他浏览器）行为。

【讨论】：