कभी-कभी बहुलक लोड होने में कुछ समय लगता है, और <body unresolved> का उपयोग करते समय, पृष्ठ सब कुछ तैयार होने तक खाली रहता है। क्या पृष्ठ पर सेवा के समय के बीच कुछ प्रदर्शित करने का कोई तरीका है और उस समय जब बहुलक अपने जादू कर रहा है?पॉलिमर प्रीलोड स्पिनर
documentation जो unresolved विशेषता का वर्णन करता है, इनमें से कुछ को साफ़ करता है।
तत्व पर लागू करना आम है, जिससे पॉलिमर तैयार होने तक आपके पृष्ठ की सामग्री को छिपाने के लिए पूरी तरह से उत्पन्न किया जा सकता है, इसे किसी भी तत्व (ओं) पर लागू किया जा सकता है। उदाहरण के लिए, आप अपने पृष्ठ के हिस्से के चारों ओर एक रैपर के रूप में <div unresolved> का उपयोग कर सकते हैं जो पॉलिमर पर निर्भर करता है, और उस रैपर के बाहर एक लोडिंग संदेश बनाएं जो तुरंत दिखाई देगा। (फिर आप polymer-ready ईवेंट सुनना चाहते हैं और जब इसे निकाल दिया जाता है तो अपना लोडिंग संदेश छुपाएं।)
पॉलिमर तत्व को इसके पूरा होने में लगने वाले समय को धीमा करने के एक बहुत ही विपरीत तरीके का उपयोग करके यहां एक उदाहरण दिया गया है जीवन चक्र तरीके (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 पर इसी परियोजना के खिलाफ एक बग दाखिल लायक हो सकता है पा रहे हैं?।)