AngularJS waiting for CSS lazy loading

Question

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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;
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 3, 2016 at 6:17

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

Comments

Amit · Accepted Answer · 2017-01-31 17:38:05Z

0

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();

answered Jan 31, 2017 at 17:38

Amit

6,3647 gold badges54 silver badges110 bronze badges

Collectives™ on Stack Overflow

AngularJS waiting for CSS lazy loading

2 Answers 2

Css Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Css Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related