时间戳

首页 > 解决方案 > Angular 在显示网站前几秒钟加载白屏

angular - Angular 在显示网站前几秒钟加载白屏

问题描述

问题：

Angular 在显示应用程序前几秒钟加载白屏。这仅在 6 次加载网站的尝试中发生 1 次，主要是在我关闭浏览器并重新打开它然后进入我的网站时。

预期结果：

大多数时候，网站/应用程序本身在 1.6 秒内加载。我基本上希望白屏随机停止显示 6-8 秒。这几乎就像网站睡着了，但我确实获得了不错的网站流量。

技术：Angular 7、AngularCLI、Cloudflare 和 Hosting with Firebase。

信息：

我在控制台中收到这 4 条奇怪的黄色警告消息。我不确定这些是否造成了麻烦。

下面的屏幕截图显示了我在 5 秒内看到的内容：

标签： angularangular-cliangular7cloudflareangular-cli-v6

解决方案

您可以尝试在浏览器从服务器加载其他较重的资源时预加载一些显示某种动画/启动画面的轻量级关键 css。这将减少“白屏”占用的时间，并给用户一种网页正在加载并且正在发生的事情的印象。

此外，您可以在此处阅读有关预加载的更多信息。假设您在<head>标签内的 index.html 上使用 Angular：

<!-- preload css-->
    <link rel="preload" as="style" onload="this.rel='stylesheet'" href="your-path/assets/preload.css">

在您的 . 上<body>，您渲染了一些微调器，在浏览器获取其他脚本文件时显示。

<div class="app-loading">
  <svg class="spinner" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>

推荐阅读