Dynamically loading CSS in angularjs (loading delay)

Question

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?

Using ng-cloak on your body element might be an option here. See docs.angularjs.org/api/ng.directive:ngCloak. — scarlz
– scarlz, Commented Jan 23, 2014 at 0:04
I have looked at ng-cloak and no it doesn't solve the problem. — Matt Way
– Matt Way, Commented Jan 23, 2014 at 0:38

jgawrych · Accepted Answer · 2014-01-23 01:06:08Z

2

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.

answered Jan 23, 2014 at 1:06

jgawrych

3,6001 gold badge31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff Hubbard · Accepted Answer · 2014-01-23 00:22:29Z

0

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.

answered Jan 23, 2014 at 0:22

Jeff Hubbard

9,9123 gold badges33 silver badges29 bronze badges

2 Comments

Matt Way Over a year ago

Yeah, this is just a rehash of the question. Any attempt at an answer?

Jeff Hubbard Over a year ago

This is not just a rehash of the question--I recapped the problem, and then said that ng-cloak won't work and that the answer is to see if HTMLLinkElement has an event on load. In any case, it seems Jonathan.Gawrych answered with a better idea anyway.

Collectives™ on Stack Overflow

Dynamically loading CSS in angularjs (loading delay)

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related