Dynamically loading CSS in angularjs (loading delay)

问题

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.

So I use this in my <head>

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

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

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.

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?

回答1:

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>

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

  html, body {
    display: block;
  }

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

回答2:

The problem here is that you're revealing the content before the CSS files have downloaded. I don't know offhand if the HTMLLinkElement object has an event for when it's loaded, but basically you need to wait for your CSS to download before revealing the content. Using ng-cloak here won't help because ng-cloak hides the content while angular is loading, not while other files are loading.

来源：https://stackoverflow.com/questions/21296407/dynamically-loading-css-in-angularjs-loading-delay

标签

angularjs

angularjs-ng-repeat