Polymer-2 启动画面

Question

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

113 个请求
986 KB 已传输
完成：6.43 秒
DOMContentLoaded：347 毫秒
已加载：3.48 秒

如Chrome所示。

虽然这对于第一次加载来说并不是很长，但如果有一个简单的（动画）显示正在加载某些内容就更好了。作为测试，我只是在我的主要 (shell) 元素之前包含了一个 <h1>Loading...</h1>。结果大概3s还是没有显示，然后显示我的Loading标签，1s后显示全部内容

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

知道我可以做些什么来立即显示闪屏之类的东西吗？如有必要，我可以展示我的整个 index.html，但它与 PSK 应用程序模板基本相同。

Answer 1

以SHOP app为例。完整的代码可以在这里找到：https://github.com/Polymer/shop.

基本上，在您的 shell 或主应用程序的 <body> 中，您可以简单地加载 webcomponents js 加载器，然后导入主应用程序，以便在后台延迟导入。

<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...，直到所有资源都加载完毕。

Polymer-2 启动画面

Polymer-2 splash-screen

polymer

polymer-2.x