Question

我正在为特定网站使用两个可视化模板，其css冲突相当多，所以我认为动态加载不会进行痛苦的编辑。

所以我在<head>

中使用了这个

<!-- css is loaded dynamically through angular -->
<link ng-repeat="item in css.files" ng-href="{{item}}" rel="stylesheet">

并在我的$rootScope.css.files模块中设置.config()。

CSS加载正常，但加载页面内容和加载CSS之间存在明显的延迟。基本上没有样式的html显示片刻，直到CSS文件完全加载。

有没有办法在加载CSS之前停止显示页面？是否有任何加载完成ng-href项的事件？

Answer 1

最简单的方法是使用普通的旧CSS。

在您网页的标题中添加以下内容：

<style>
  html, body {
    display: none;
  }
</style>

然后在最后加载的css中，撤消display none：

  html, body {
    display: block;
  }

后者将覆盖之前的内容，您的页面将显示所有动态css。

Answer 2

这里的问题是你在下载CSS文件之前透露了内容。我不知道HTMLLinkElement对象是否有加载时的事件，但基本上你需要等待你的CSS下载才能显示内容。在此处使用ng-cloak无效，因为ng-cloak会在加载 angular 时隐藏内容，而不会在加载其他文件时隐藏内容。