在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屋!