2014-09-15 19 views
9

Czasami ładowanie polimeru trwa chwilę, a podczas korzystania z <body unresolved>, strona pozostaje pusta, dopóki wszystko nie będzie gotowe. Czy istnieje sposób na wyświetlenie czegoś pomiędzy czasem, w którym serwowana jest strona, a czasem, w którym polimer się robi, wykonując swoją magię?Obciążenie wstępne polimeru

Odpowiedz

6

The documentation, który opisuje atrybut unresolved usuwa niektóre z nich.

Chociaż często stosuje się element unresolved do elementu <body>, powodując ukrywanie całej zawartości strony, dopóki polimer nie będzie gotowy, można go zastosować do dowolnego elementu (elementów). Możesz na przykład użyć <div unresolved> jako opakowania na części strony, która bazuje na Polymer, i utworzyć wiadomość ładującą znajdującą się poza tym opakowaniem, która będzie widoczna natychmiast. (Będziesz wtedy chciał usłyszeć wydarzenie polymer-ready i ukryć wiadomość o załadowaniu, gdy zostanie ona uruchomiona.)

Oto przykład użycia bardzo wymyślnego sposobu spowolnienia czasu potrzebnego na wypełnienie jednego z elementów polimeru metody cyklu życia (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> 

(Nawiasem mówiąc, co ty znalezienia być powolne ładowanie Jeśli jest to element standardowy/rdzeń, może warto zgłaszając błąd wobec analogicznego projektu na GitHub?.)