html – 聚合物预加载微调器

发布时间：2020-12-14 21:19:45 所属栏目：资源来源：网络整理

导读：有时加载聚合物需要一段时间,而当使用 body unresolved时,页面会保持空白,直到所有内容都准备就绪.有没有办法在提供页面的时间和聚合物完成其魔术的时间之间显示某些内容？解决方法描述未解析属性的 documentation清除了其中一些属性. 虽然将未解决的问题

有时加载聚合物需要一段时间,而当使用< 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上针对相应项目提交错误.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!