避免在用ng href加载样式表之前显示内容

Avoid showing content before stylesheet is loaded with ng-href

本文关键字：显示 样式 加载 ng href      更新时间：2023-09-26

我想使用ng href加载不同的主题。

问题是，在应用样式表之前会显示未格式化的内容。

我做了一个Plunker，如果你比较最后3个版本，我刚刚更改了第8行

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link ng-href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link ng-href="//netdna.bootstrapcdn.com/bootstrap/{{styleVersion}}/css/bootstrap.min.css" rel="stylesheet">

如果我使用ng-href而不是href，您可以暂时看到未格式化的HTML，这是我需要避免的。

因此，我的问题是，是否可以等到加载样式表，或者是否有比ng-href 更好的解决方案

我根据在angularjs（加载延迟）中动态加载CSS的反馈编辑了Plunker

基本上它做3件事：

  1. 加载带有的start.css文件

    html, body{
    display: none
}
  2. 加载ng href css
  3. 加载一个end.css文件，该文件将正文的样式设置回display: block

这是一个破解，但似乎有效。

相关文章：