首页 文章

聚合物-2飞溅屏幕

提问于
浏览 次
0

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

  • 113请求

  • 986 KB已转移

  • 完成：6.43秒

  • DOMContentLoaded：347ms

  • 已加载：3.48秒

如Chrome所示 .

虽然这对于第一次加载来说并不是很长，但是如果有一个简单的（动画的）显示器正在加载某些东西，那将会很好 . 作为一个测试，我只是在我的main（shell）元素之前包含一个 <h1>Loading...</h1> . 结果是大约3秒仍然没有显示，然后显示我的加载标签，1秒后显示整个内容 .

我想这是因为Polymer模板在 <body> 之前有一个 <link> 到shell元素，并在渲染body之前加载所有依赖项 .

知道我能做什么才能立即显示闪屏？如有必要，我可以显示我的整个index.html，但它与PSK应用程序模板基本相同 .

polymer polymer-2.x

1 回答

  • 1

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

    基本上，在你的shell或主应用程序的 <body> 中，你可以简单地加载webcomponents js loader并在此之后导入main-app，以便在懒惰和后台进行导入 .

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

    回复于

相关问题