当页面加载时，HTML简要显示。

Question

当页面加载时，HTML简要显示。

htmlangularloadingngcloak

3

在我的Angular应用中，当页面加载时，我的菜单组件html代码会短暂地显示出来。即使我使用display none css隐藏菜单html根元素，当页面开始加载时，html仍然会被显示出来。

我已经阅读了很多关于ng-cloak的内容(https://docs.angularjs.org/api/ng/directive/ngCloak)，但似乎Angular 4没有ngCloak。

所以我不知道如何避免这种不愉快的效果。

Angular 4是否有一个等效的指令来代替ng-cloak？如何在加载时正确显示页面而不显示未样式化的html？

- soung

2

我想要一个更令人满意的答案，所以我会提高你的问题。 - Kellen

只是让你知道，你所描述的被称为FOUC - 未经样式处理的闪烁内容。 - Pytth

5个回答

2

我会选择 @HendrikBrummermann 的答案：放置一个“加载中…”的标签。

从你的评论中，"…哪个组件包含了头部, 未设置样式的头部html被展示出来"，我相信你已经得到了答案：还没有加载可以为头部的HTML设置样式的CSS。

Hendrik的答案尽可能地减少了标签，因此这种效果不明显。

如果您真的需要立即为标题设置样式，恐怕您需要使用内联样式（而且没有图片或字体-它们也不会被加载）。只需保持最少量就可以了。

<!doctype html>
<html>
    <head>
        ...
        <style>
        ...
        </style>
    </head>
    <body>
       <app-root>(styled header)</app-root>
    </body>
</html>

当页面加载时，您可以删除占位符。

您也可以尝试（但这很混乱且难以维护）采用两个“加载器”的增量方法：一个非常、非常小的加载器几乎不需要CSS/图像，一旦字体和其他极少量的基本资产被onLoad加载，您可以用简单的动画替换它，然后从那里加载所有其他内容并启用完整的Angular应用程序。

还有“打包器”实用程序，可以将大多数HTML、CSS和JS压缩为单个缩小的SPA包；其中一些（我很抱歉，我看到过几个使用过它们的人，但从未使用过自己并且无法引用它们）也提供了像上面描述的最小加载器。这可能会为您处理一些维护工作，并且值得一试。我知道这是因为我的一个同事在一个项目中不得不用HTML5替换Flash“请等待”加载器（这不是一个Angular项目，但我认为这并不重要）。

- LSerni

1

这些是你可以尝试的东西：

（在我看来最好的解决方案）您可以使用Angular Universal进行服务器端渲染。工作流程如下：
- 用户发送请求到example.com
- 服务器不会响应纯HTML（如上面的示例），而是在服务器端运行Angular并呈现输出HTML
- 将此HTML（连同指向已编译应用程序的<script>标签）发送到用户的浏览器
- 乍一看，用户看到由其浏览器格式化的HTML + CSS。然后浏览器启动*.js文件，并在一段时间后用“单页应用程序”替换“静态页面”
- 由于BrowserModule.withServerTransition();有关Universal的更多信息可在此处阅读。，Angular可以处理在“静态页面”上执行的所有操作（在JavaScript启动之前）
您可以从Universal进一步发展，并将您的Angular Universal应用程序作为渐进式Web应用程序（PWA）提供。有关PWA的更多信息可在此处阅读
再向前迈一步，并从Google Cache引入加速移动页面（AMP）。有关AMP的更多信息可在此处阅读。
您永远不应该在index.html中放置任何超过应用程序root节点的内容：

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

如果您想在用户等待Angular时展示一些“好看”的内容，可以使用IE CSS动画创建某种类型的加载器：

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="loader.css">
    </head>
    <body>
       <app-root>
           <div id="css-loader"></div>
       </app-root>
    </body>
</html>

关于1、2和3点：在这里你可以找到Angular Universal & PWA & AMP的组合示例。

- Maciej Treder

0

我认为这种行为是不可避免的。你能做的最好的事情就是尽可能地加快速度。使用最新版本、AOT和懒加载可以帮助很多。
或者，你可以在你的index.html中添加一些CSS。

- Robin Dijkhof

0

这是一个特性，而不是错误。

你可以选择以下三种方案之一：

尽快获取信息，并假设人们能够判断何时完全加载，或者
让人们等待信息，并在信息全部加载后再向他们展示它
某种荒谬的灰色区域独角兽实现，确保页面的某些部分加载后再显示它，但对其他部分不予理会

历史上，方案#2一直是最受批评的方法，尤其是因为有那么多人想采用它。我建议不要追求它。

- Jan Kyu Peblik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hendrik Brummermann · Accepted Answer

index.html文件不应包含任何特定于应用程序的HTML代码，只应包含一些标题和应用程序的根标签。它可以在根标签内包含一个占位文本，例如“正在加载”。

应用程序的所有HTML代码都应该位于app.component.html和其他组件中。

@angular/cli会生成一个名为"template"的index.html文件，其内容如下：

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
       <app-root>Loading...</app-root>
    </body>
</html>

浏览器立即显示“正在加载…”文本。在Angular被初始化之后，它将被实际应用程序替换。要获得白色页面，只需删除文本。