在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.

所以我在我的

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

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

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.

在页面的标题中添加:

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

然后在最后加载的css中，撤消显示none:

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

  html, body {
    display: block;
  }

后者将覆盖前者，并且您的页面将与您的所有动态 css 一起显示.

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

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