动态加载在angularjs CSS（延迟加载） [英] Dynamically loading CSS in angularjs (loading delay)

问题描述

我使用两个可视模板一个特定的网站，它的CSS冲突不少，因此而不是做一个痛苦的编辑，我想通动态加载会做的伎俩。

I am using two visual templates for a particular site, whose css conflicts quite a bit, so rather than doing a painful edit, I figured dynamic loading would do the trick.

于是我在使用我的＆LT; HEAD＆GT;

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

和设置 $ rootScope.css.files 里面我的.config（）我的模块。

And set $rootScope.css.files inside my .config() of my module.

在CSS加载罚款，但没有加载页面内容，并加载CSS之间有明显的延迟。基本上无样式的HTML显示了一会儿，直到CSS文件已完全加载。

The CSS loads fine, however there is a noticeable delay between loading the page content, and loading the CSS. Basically the unstyled html displays for a moment until the CSS files have completely loaded.

有什么办法可以阻止网页显示的CSS加载之前？是否有一个 NG-HREF 项目完成负载？

Is there any way to stop the page showing before the CSS has loaded? Is there any event for load completion of an ng-href item?

推荐答案

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

The easiest way will be to just use plain old css.

在你的页面的页眉补充一点：

In the header of your page add this:

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

然后在最后的CSS加载，撤消显示无：

Then in the last css to load, undo the display none:

  html, body {
    display: block;
  }

后者将覆盖previous，你的页面将与所有动态CSS的出现。

The latter will override the previous, and your page will appear with all of your dynamic css.

这篇关于动态加载在angularjs CSS（延迟加载）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！