动态加载在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.
于是我在使用我的< HEAD>
<!-- 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屋!