CODEWITHSUNDEEP
javascriptangularjs
Amit
Amit

Reputation: 6304

AngularJS waiting for CSS lazy loading

I have a one-page app, in which I use angular-css-injector to inject css pretty much on every "page" change.

When loading the page, it does not look good for a fraction of a second, and then the css loads, and all is good. How can I wait for the css to load, and then show the page? (meanwhile Ill show a loader).

I checked, and found that there is no callback for when the css was loaded.

I do not want to load the css in advance, because some modules may have the same classes and I do not have time to handle that mess.

Upvotes: 0

Views: 724

Answers (2)

Amit
Amit

Reputation: 6304

A proper way of doing this is using SCSS, in which to write SCSS code under each component selector, so no overlap would happen.

For the case suggested, it is best to write your own injector, so you can control the loading of the file. It can be as basic or as complicated as you want to build it, for example:

var client = new XMLHttpRequest();
client.open('GET', '/component/style.css');
client.onreadystatechange = function() {
  document.querySelector("style#dynamic").innerHTML = client.responseText;
}
client.send();

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22373

Css Solution

In your basic css sheet that loads in in the beginning set the body tag to display none or opacity 0. then on load of the angular css use display block or opacity 1.

Like this in styles.css (or whatever you call your main css)

body {
    display: none;
    // or
    opacity: 0;
}

Upvotes: 2

Related Questions