Css解决方案

Question

我有一个单页应用程序，其中我使用angular-css-injector在每个＆＃34;页面上注入css＆＃34;变化

加载页面时，它在几分之一秒内看起来不太好，然后css加载，一切都很好。我如何等待加载css，然后显示页面？（同时Ill展示装载机）。

我查了一下，发现加载css时没有回调。

我不想提前加载css，因为某些模块可能有相同的类，我没有时间来处理这个混乱。

Answer 1

Css解决方案

在开头加载的基本css表中，将body标签设置为none或opacity 0.然后加载角度css时使用显示块或不透明度1.

在styles.css（或任何你称之为主要css）中的这个

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

Answer 2

这样做的一种正确方法是使用SCSS，在每个组件选择器下编写SCSS代码，因此不会发生重叠。

对于建议的情况，最好编写自己的注入器，以便控制文件的加载。它可以像你想要构建它一样基本或复杂，例如：

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

AngularJS等待CSS延迟加载

2 个答案:

Css解决方案