Question

我正在制作一个角度应用程序，我需要预加载一些数据。因此，用户将看到加载页面，直到加载数据。

但我的问题是，如果加载页面，尚未加载styless.css文件中的样式。该文件仅在1秒后加载。这意味着用户将首先看到这一点：

只有在加载文件后，用户才会看到：

我的问题：我如何等待加载styles.css文件？

html代码：

.saving {
   text-align: center;
   position: absolute;
   font-size: 35px;
   width: 250px;
   height: 70px;
   line-height: 50px;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-family: helvetica, arial, sans-serif;
   text-transform: uppercase;
   font-weight: 900;
   letter-spacing: 0.2em;
 }

 .saving span {
   font-size: 50px;
   animation-name: blink;
   animation-duration: 1.4s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }

 .saving span:nth-child(2) {
   animation-delay: .2s;
 }

 .saving span:nth-child(3) {
   animation-delay: .4s;
 }

 @keyframes blink {
   0% {
     opacity: .2;
   }
   20% {
     opacity: 1;
   }
   100% {
     opacity: .2;
   }
 }

html：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Root</title>
  <base href="/" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet" />
</head>
<body>
  <root-page></root-page>


<div>
  <p class="saving">Loading<span>.</span><span>.</span><span>.</span></p>
</div>


</body>
</html>

Answer 1

在index.html标记的<style>中插入页面加载动画所需的css。（所以复制粘贴＆＃34;保存＆＃34;类）

或者，如果您确实需要引用整个css，请使用index.html标记从<script src="...">中的资产中引用它。

Angular 5如何等待styles.css被加载

1 个答案: