Полимер для предварительного натяжения

Иногда для загрузки полимера требуется некоторое время, и при использовании <body unresolved> страница остается пустой, пока все не будет готово. Есть ли способ показать что-то между временем, в течение которого страница обслуживается, и временем, которое полимер делает, делая свою магию?Полимер для предварительного натяжения

источник

2014-09-15 Peter Klipfel

documentation, который описывает атрибут unresolved, очищает часть этого.

Хотя принято применять unresolved к элементу <body>, в результате чего содержимое всей страницы будет скрыто до тех пор, пока не будет подготовлен полимер, он может быть применен к любому элементу (элементам). Например, вы можете использовать <div unresolved> в качестве обертки вокруг части вашей страницы, которая опирается на Полимер, и создать сообщение загрузки, которое находится за пределами этой оболочки, которая будет сразу видна. (Затем вы хотите прослушать событие polymer-ready и скрыть свое загрузочное сообщение, когда оно уволено.)

Вот пример использования очень надуманного способа замедления времени, необходимого для того, чтобы элемент 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?.)

источник

2014-09-16 03:36:31

Полимер для предварительного натяжения

ответ

Смежные вопросы