Polymer-2初始屏幕

Question

我已经开始使用Polymer-2进行更大的项目。 清除浏览器缓存（Chrome）后，我具有以下负载统计信息：

• 113个要求
• 传送986 KB
• 完工：6.43 s
• DOMContentLoaded：347ms
• 加载：3.48 s

如Chrome所示。

虽然这对于第一次加载来说并不太长，但是如果有一个简单的（动画）显示正在加载的东西，那就很好了。 作为测试，我仅在主（shell）元素之前添加了<h1>Loading...</h1> 。 结果是大约3秒钟仍然没有显示任何内容，然后显示了我的正在加载标签，并且1秒钟后显示了整个内容。

我猜这是由于Polymer模板在<body>之前具有<link> shell元素的<link> ，并在呈现body中的任何内容之前加载了所有依赖项。

知道如何立即显示启动画面之类的东西吗？ 如有必要，我可以显示我的整个index.html，但它与PSK应用程序模板基本相同。

Answer 1

例如，您可以使用SHOP应用程序 。 完整的代码可以在这里找到： https : //github.com/Polymer/shop 。

基本上，在您的外壳程序或主应用程序的<body> ，您可以简单地加载webcomponents js loader并在此之后导入主应用程序，从而可以在后台懒惰地进行导入。

<body>

  <main-app>Loading...</main-app>

  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="src/main-app.html">

</body>

这将显示“ Loading...直到所有资源都被完全加载。