html – 聚合物预加载微调器

有时加载聚合物需要一段时间,而当使用< body unresolved>时,页面会保持空白,直到所有内容都准备就绪.有没有办法在提供页面的时间和聚合物完成其魔术的时间之间显示某些内容

解决方法

描述未解析属性documentation清除了其中一些属性.

虽然将未解决的问题应用于< body>元素,导致整个页面内容被隐藏,直到Polymer准备好,它可以应用于任何元素.例如,您可以使用< div unresolved>作为依赖于Polymer的页面部分的包装器,并创建一个在该包装器外部的加载消息,该消息将立即可见. (然后你想要听取聚合物就绪事件并在触发时隐藏你的加载信息.)

下面是一个使用一种非常人为的方法来减缓Polymer元素完成其生命周期方法(live demo)所需的时间的示例:

<!DOCTYPE html>
<html>
  <head>
    <Meta charset=utf-8 />
    <title>Polymer Demo</title>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <p id="spinner">Loading...</p>

    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

    <polymer-element name="slow-poke">
      <template>
        <h1><content></content></h1>
      </template>
      <script>
        Polymer({
          // Used to introduce a delay in initializing the Polymer element.
          // Don't try this at home!
          created: function() {
            var start = Date.now();
            while (true) {
              if (Date.now() - start > 1000) {
                break;
              }
            }
          }
        });
      </script>
    </polymer-element>

    <div unresolved>
      <slow-poke>Here I am... finally!</slow-poke>
      <slow-poke>Me too!</slow-poke>
    </div>

    <script>
      window.addEventListener('polymer-ready',function() {
        document.querySelector('#spinner').classList.add('hidden');
      });
    </script>
  </body>
</html>

(顺便说一句,你发现什么是慢速加载?如果它是标准/核心元素,可能值得在GitHub上针对相应项目提交错误.)

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...