html在页面加载时简要显示

问题描述：

在我的Angular应用中，当页面加载时，我的菜单组件html代码会短暂显示。即使我使用display none css隐藏菜单html根元素，当页面开始加载时，html仍然显示。我读了很多关于ng-cloak（https://docs.angularjs.org/api/ng/directive/ngCloak）的东西，但是看起来Angular 4没有ngCloak。html在页面加载时简要显示

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

是否Angular 4对ng-cloak有一个等同的指令？如何正确显示页面而不显示未加载的html样式？

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

只要你知道，你所描述的就是FOUC--无风格内容的Flash。 – Pytth

答

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

答

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

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

@角/ CLI生成一个index.html “模板” 文件看起来像这样：

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

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

嗨亨德里克。我的index.html不包含任何特定的html代码。它只包含包含头部的app-root标签。因此显示Loading ...。显示标题的无格式html后显示。那就是问题所在。 – soung

答

那些事是你可以给一个尝试：

（在我看来最好的解决方案）可以使用角万能，对于服务器端渲染。工作流程是：
- 用户发送请求到example.com
- 服务器不与纯HTML（上面的例子）响应，但运行在服务器侧角，并用<script>标签渲染输出HTML
- 此HTML（一起指向已编译的应用程序发送给用户浏览器
- 第一次看，用户看到他的浏览器格式化的HTML + CSS，然后浏览器启动* .js文件，并在一段时间后将“静态页面”替换为“单页面应用程序“
- Angular可以处理所有的行为离子“静态页面”（JavaScript的发射前）中进行，这要归功于BrowserModule.withServerTransition();More about Universal can be read here.
您可以一步从通用，并为您的角通用的应用作为一个渐进Web应用程序（PWA）。 More about PWA can be read here
更进一步，并从Google缓存中引入Accelerated Mobile Page（AMP）。 More about AMP can be read here。
您应该永远不要在索引中放置比应用程序root节点更多的东西。HTML：

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

如果你真的想拥有的东西 “好”，而用户等待角，您可以创建某种装载机即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 3：Here you can find an example of Angular Universal & PWA & AMP combined.

开始=>

答

这是一个功能，不是一个错误。

你可以做的三件事情之一：

我们的UA只要他们能和假设当事情满载的人可以告诉获取信息，或
让人等信息，并且只有在它全部加载之后才显示给他们
某种荒谬的灰色区域独角兽实现可确保部分页面在显示前被加载，但不会打扰其他部分

历史上，＃2一直是最嘲笑的方法，尤其是因为很多人都希望这样做。我建议不要追求它。

答

我会和@ HendrikBrummermann一起回答：放置一个“Loading ...”标记。

从您的评论，“......这些组件包括头...显示头的无样式的HTML”，我相信你已经有了答案：有没有CSS加载的样式化的标题的HTML尚未。

亨德里克的回答使标签保持最小，所以这种效果不明显。

如果您确实需要立即设置标题的样式，我担心您需要使用内联样式（并且没有图片或字体 - 这些样式也不会被加载）。保持最低限度是所有的：

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

然后加载后，您可以删除占位符。

你也可以尝试一下两个“加载器”的增量方法：一个非常，最小的需要紧靠没有CSS /图像，然后尽快字体和其他很少基本资产onLoad'ed你可以用一个简单的动画替换它，然后从那里加载所有其余的并激活完整的Angular应用程序。

还有“打包器”工具，可将大多数HTML，CSS和JS压缩为单个缩小的SPA包;其中一些（我很抱歉，我看到其中有几个使用过，但从未用过我自己也无法引用它们）也提供了如上所述的最小加载程序。这可能照顾你的一些维修，这也许值得一试。我知道这是因为对于一个项目，我的一位同事必须用HTML5替换Flash“Please wait”加载器（这不是一个Angular项目，但我认为它不重要）。

html在页面加载时简要显示

相关推荐