Angular 5中如何等待styles.css加载完成

This is a classic Flash of Unstyled Content (FOUC) issue—your loading markup renders before the external styles.css finishes downloading, leading to that jarring unstyled text first. Let's fix this with two solid approaches, starting with the most reliable one.

Approach 1: Inline Critical Loading Styles (Best for Speed & Reliability) #

Since your loading state only needs a small set of styles, the simplest fix is to inline those styles directly in your index.html's <head>. This way, the styles are available immediately as the browser parses the HTML, no waiting for external CSS files.

Here's your modified index.html with inline styles:

<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" />
  <!-- Inline critical loading styles here -->
  <style>
    .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; } 
    }
  </style>
</head>
<body>
  <root-page></root-page>
  <div>
    <p class="saving">Loading<span>.</span><span>.</span><span>.</span></p>
  </div>
</body>
</html>

Why This Works: #

• Inline styles are parsed and applied immediately when the browser loads the <head> section, so your loading state looks correct from the moment it's rendered.
• You can keep the same styles in styles.css if needed—inline styles will take precedence initially, and once the external CSS loads, it will handle other styles for your app without conflict.

Approach 2: Hide Loading State Until CSS Loads (JS-Based) #

If you prefer not to inline styles, you can hide the loading element by default and only show it once styles.css has finished loading. Note: This relies on JavaScript, so it's slightly less reliable if JS is blocked or slow to load.

1. Update your index.html to hide the loading container initially:

<div style="display: none;" id="loading-container">
  <p class="saving">Loading<span>.</span><span>.</span><span>.</span></p>
</div>

2. Add an onload handler to your styles.css link (if it's explicitly added to your index.html—Angular CLI may inject it automatically, so you might need to adjust your build config to add this handler):

<link rel="stylesheet" href="styles.css" onload="document.getElementById('loading-container').style.display = 'block';">

3. Add a fallback in case the CSS fails to load:

<noscript>
  <style>#loading-container { display: block !important; }</style>
</noscript>

Final Notes #

For Angular apps, the inline styles approach is almost always better for loading states—it avoids any dependency on external resources and ensures a smooth first impression. You can even use Angular CLI's built-in support for critical CSS inlining if you have more complex styles, but for this simple loading state, manual inlining is quick and effective.

内容的提问来源于stack exchange，提问作者Dev Db