Question

我刚刚开始移植我现有的角度应用程序，以便在它被释放后使用cli。但是我注意到我的应用程序开始加载后样式正在加载。在应用程序加载期间，我显示了一个加载gif，我在页面中心。现在发生的事情是，它出现在页面的左上角一瞬间，然后以gif为中心加载样式，然后加载应用程序。

有没有办法模仿这种行为，好像我的html页面顶部加载了css的链接标记？现在它将我的样式捆绑在一个js文件中，并加载到body标签的底部，导致延迟。

我的.angular-cli.json如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "program-quick-view-cli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "assets/styles/main.scss"
      ],
      "scripts": [
        "assets/js/pdfmake.min.js",
        "assets/js/Treant.js",
        "assets/js/vfs_fonts.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Answer 1

如果您希望加载“加载页面”，我建议您直接在index.html中为加载页面注入/嵌入样式，这样就无法获得FOUC (Flash of Unstyled Content)加载过程的重点。实际上，您甚至可以在CSS中嵌入加载图形，这样就不需要额外的请求了。

例如（使用SVG）：

<html>
<head>
    <!-- ... -->
    <style>
        @keyframes knock-their-socks-off {
            /*  ... */
        }

        .cool-loader {
            /*  ... */
            animation: knock-their-socks-off 10s infinite;
            background-image: url("data:image/svg+xml;utf8,<svg ...");
            /*  ... */
        }
    </style>
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <app-root>
        <div class="cool-loader"></div>
    </app-root>
    <link rel="stylesheet" href="/rest-of-site.css" ...>
    <!-- ... -->
</body>
</html>

如果您使用的是GIF，则可以对其进行Base64编码以进行嵌入。只是要小心，文件越大，它就越会使index.html膨胀。

使用CLI加载角度应用程序后加载样式

1 个答案: