聚合物预载旋转器

Question

聚合物预载旋转器

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

Answer 1

描述该属性的文档unresolved清除了其中一些内容.

虽然这是共同申请unresolved的<body>元素,使您的网页内容的全部被隐藏,直到聚合物是准备好了,它可以应用到任何元素(一个或多个).例如,您可以使用<div unresolved>依赖于Polymer的页面部分作为包装器,并创建一个在该包装器外部的加载消息,该消息将立即可见.(然后你想要听到这个polymer-ready事件并在被触发时隐藏你的加载消息.)

下面是一个使用非常人为的方法减慢Polymer元素完成其生命周期方法(现场演示)所需时间的示例:

<!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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，2 月前
查看次数：	4090 次
最近记录：	11 年，1 月前