2014-09-15 86 views
9

Bazen yüklemek için polimer için bir süre alır ve <body unresolved> kullanmak herşeyi hazır olana kadar, sayfa boş kalır. sayfa yayınlandığı zaman arasında bir şeyler göstermek için bir yol ve polimer sihrini yapıyor yapıldığını zaman var mı? unresolved niteliğini açıklarPolimer preload spinner

cevap

6

documentation bu bazılarını temizler. o Polimer hazır olana kadar gizlenmesine sayfanızın içeriğinin tamamını neden <body> elemana unresolved uygulamak için ortak olsa da

, herhangi bir eleman (lar) uygulanabilir. Sen, mesela, Polymer dayanır sayfanızın bölümünün etrafında sarıcı olarak <div unresolved> kullanın ve hemen görünür olacağı sarmalayıcı dışındaki bir yükleme mesajı oluşturabilir. (Daha sonra polymer-ready olayını dinlemek ve bu işlem tetiklendiğinde yükleme iletinizi gizlemek istersiniz.)

Polymer öğesinin bir tanesini tamamlaması için gereken süreyi yavaşlatmak için çok karmaşık bir yöntemden bir örnek aşağıda verilmiştir. yaşam döngüsü yöntemleri (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> 

(bu arada, bu bir standart/çekirdek elemanı varsa, o GitHub'dan karşılık gelen proje hakkında hata dosyalama değer olabilir yavaş yükleme olmaya bulmakta ne?.)