html – 聚合物预加载微调器

前端之家收集整理的这篇文章主要介绍了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上针对相应项目提交错误.)

原文链接:https://www.f2er.com/html/232417.html

猜你在找的HTML相关文章