AngularJS正在等待CSS延迟加载

AngularJS waiting for CSS lazy loading

本文关键字：延迟加载 CSS 在等待 AngularJS      更新时间：2023-11-15

我有一个单页应用程序，在其中我使用有角度的css注入器在每个"页面"更改中注入css。

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

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

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

Css解决方案

在开始加载的基本css表中，将body标记设置为显示none或opacity 0。则在加载角度css时使用显示块或不透明度1。

像这样在styles.css（或者你称之为主css的任何东西）中

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

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

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

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