Polymer preload spinner

前端未结

关注

 1  910

Sometimes it takes a while for polymer to load, and when using , the page stays blank until everything is ready. Is there a way to displa

相关标签:

1条回答

不思量自难忘°

2020-12-31 18:10

The documentation that describes the unresolved attribute clears some of this up.

While it's common to apply unresolved to the <body> element, causing the entirety of your page's content to be hidden until Polymer is ready, it can be applied to any element(s). You can, for instance, use <div unresolved> as a wrapper around the portion of your page that relies on Polymer, and create a loading message that's outside that wrapper which will be visible immediately. (You'd then want to listen to the polymer-ready event and hide your loading message when that's fired.)

Here's an example using a very contrived way of slowing down the time it takes for the Polymer element to complete one of its lifecycle methods (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>

(By the way, what are you finding to be slow-loading? If it's a standard/core element, it might be worth filing a bug against the corresponding project on GitHub.)

0 讨论(0)