Question

我想在我的角度应用开始渲染之前创建一个引导前加载页面。

我将此代码添加到index.html中。但是，我注意到一秒钟左右的时间，显示的加载消息没有样式格式。之后，它会显示所应用的样式，从而带来抖动的体验。

有没有一种方法可以在应用加载之前显示带有样式的加载屏幕，从而避免抖动？

index.html

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
    .loading-page {
        background: #fff;
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .loading-box {
        width: 30vw;
        margin: 12% auto;
    }

    .loading-box-body {
        background: #fff;
        padding: 0px;
        border-top: 0;
        color: #666;
    }

    .loading-box-msg {
        font-size: 20px;
        text-align: center;
    }
  </style>
</head>
<body>
  <app-root>
      <div class="loading-page">
          <div class="loading-box">
              <div class="loading-box-body">
                  <p class="loading-box-msg">Loading application. Please wait..</p>
              </div>
          </div>
      </div>
  </app-root>
</body>
</html>

我会把经验撒给work like this.

Answer 1

我认为这是不可避免的。浏览器使用默认样式加载文本，然后应用CSS。您可以选择用文本加载svg而不是文本。我认为这可以解决。

您可以查找FOUT（无样式文本的闪烁）或FOIT（无形文本的闪烁）以获取更多信息。

来自wikipedia

没有样式的内容（FOUC，也有没有样式的文本）1 [2]是一种实例，在这种情况下，网页会在加载外部CSS样式表之前以浏览器的默认样式短暂显示，这是由于Web浏览器引擎在检索所有信息之前呈现页面。加载并应用样式规则后，页面便会自动更正。但是，这种转变可能会分散注意力。相关问题包括不可见文本（FOIT）闪烁和伪文本（FOFT）闪烁。

在Angular 7中创建引导前加载页面

1 个答案: