Angular应用加载时隐藏外部HTML：等待styles.css加载后显示静态内容

针对你的需求，我推荐几个轻量、无需额外加载器的方案，核心思路都是先隐藏静态页眉页脚，等styles.css加载完成后再显示，同时兼顾页面可用性：

方案1：内联CSS隐藏 + 外部CSS覆盖（纯CSS实现） #

这是最简单的纯CSS方案，不需要任何JavaScript：

1. 给静态页眉页脚的容器添加内联样式，先隐藏内容：

<header class="static-header" style="opacity: 0; visibility: hidden; height: 0; overflow: hidden;">
  <!-- 第三方提供的静态页眉内容 -->
</header>
<footer class="static-footer" style="opacity: 0; visibility: hidden; height: 0; overflow: hidden;">
  <!-- 第三方提供的静态页脚内容 -->
</footer>

这里用opacity:0+visibility:hidden+height:0组合，是为了避免页面布局突然跳动（如果用display:none，加载后显示会瞬间撑开布局，体验不好）。

2. 在你的styles.css中，针对这些容器重置样式，恢复正常显示：

.static-header, .static-footer {
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  /* 可选：添加过渡动画，让显示更平滑 */
  transition: opacity 0.3s ease;
}

优点：纯CSS实现，无JS依赖；显示过渡平滑，避免布局跳动。
缺点：如果styles.css加载失败，内容会一直隐藏。可以加个<noscript>标签兜底：

<noscript>
  <style>
    .static-header, .static-footer {
      opacity: 1;
      visibility: visible;
      height: auto;
      overflow: visible;
    }
  </style>
</noscript>

方案2：利用CSS加载完成事件（轻量JS） #

如果想更精准地控制「只有CSS加载完成才显示」，可以用<link>标签的onload事件，只需要几行极简JS：

1. 给页眉页脚容器加一个hidden类，用内联CSS定义隐藏样式：

<style>
  .hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
</style>

<header class="static-header hidden">...</header>
<footer class="static-footer hidden">...</footer>

2. 在加载styles.css的<link>标签上添加onload事件：

<link rel="stylesheet" href="styles.css" onload="document.querySelectorAll('.hidden').forEach(el => el.classList.remove('hidden'))">

还可以加个onerror事件处理加载失败的情况，比如提示用户或者强制显示内容：

<link rel="stylesheet" href="styles.css" 
  onload="document.querySelectorAll('.hidden').forEach(el => el.classList.remove('hidden'))"
  onerror="alert('样式加载失败，将显示原始内容'); document.querySelectorAll('.hidden').forEach(el => el.classList.remove('hidden'))">

优点：精准控制显示时机，能处理CSS加载失败的异常场景；代码量极少，完全不属于「加载器」范畴。
缺点：依赖JS，但现代浏览器几乎都支持，且可以用<noscript>兜底。

方案3：利用CSS变量（进阶纯CSS） #

如果想更优雅地管理显示状态，可以用CSS变量：

1. 在<head>里定义全局变量，默认隐藏：

<style>
  :root {
    --static-content-visibility: hidden;
    --static-content-opacity: 0;
    --static-content-height: 0;
    --static-content-overflow: hidden;
  }
  .static-header, .static-footer {
    visibility: var(--static-content-visibility);
    opacity: var(--static-content-opacity);
    height: var(--static-content-height);
    overflow: var(--static-content-overflow);
    transition: opacity 0.3s ease;
  }
</style>

2. 在styles.css的最顶部覆盖这些变量：

:root {
  --static-content-visibility: visible;
  --static-content-opacity: 1;
  --static-content-height: auto;
  --static-content-overflow: visible;
}

优点：纯CSS实现，语义化更强，样式集中管理；同样支持平滑过渡动画。
缺点：和方案1一样，需要<noscript>处理CSS加载失败的情况。

我个人更推荐方案2，因为它能精准控制显示时机，还能处理异常情况，而且代码非常轻量，完全不需要额外的加载器库。

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