聚合物预载旋转器 [英] Polymer preload spinner
问题描述
有时加载聚合物需要一段时间，并且在使用< body unresolved> 时，页面保持空白，直到一切准备就绪。有没有办法在页面投放的时间和聚合物完成魔术的时间之间显示一些内容？ 解决方案
描述
虽然通常应用未解析到< body> 元素，导致整个页面内容被隐藏，直到聚合物准备就绪，它可以应用于任何元素。例如，您可以使用< div unresolved> 作为依赖于Polymer的页面部分的包装，并在该包装外创建一个加载消息，立即可见。 （然后你会想要听取聚合物准备好的事件，并在触发时隐藏你的加载信息。）
下面是一个使用非常有意思的方式来减慢Polymer元素完成其生命周期方法所需时间的示例（
<！DOCTYPE html>
< html>
< head>
< meta charset = utf-8 />
< title> Polymer Demo< / title>
< style>
.hidden {
display：none;
}
< / style>
< / head>
< body>
< p id =spinner>正在加载...< / p>
< script src =http://www.polymer-project.org/platform.js>< / script>
< link rel =importhref =http://www.polymer-project.org/components/polymer/polymer.html>
< polymer-element name =慢戳>
< template>
< h1><内容>< / content>< / h1>
< / template>
< script>
Polymer（{
//用于在初始化Polymer元素时引入延迟
//不要在家中尝试此操作
created：function（）{
while（true）{
if（Date.now（） - start> 1000）{
break;
}
}
}
}）;
< / script>
< / polymer-element>
< div unresolved>
< slow-poke>这里我是...终于！< / slow-poke>
< slow-poke>我也是！< / slow-poke>
< / div>
< script>
window.addEventListener（'polymer-ready'，function（）{
document.querySelector（'＃spinner'）。classList.add（'hidden'）;
}）;
< / script>
< / body>
< / html>
（顺便说一句，你认为什么是缓慢加载？如果它是一个标准/核心元素，可能值得在GitHub上提供相应项目的bug。）
Sometimes it takes a while for polymer to load, and when using <body unresolved>, the page stays blank until everything is ready. Is there a way to display something between the time that the page is served and the time that polymer is done doing its magic?
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.)
这篇关于聚合物预载旋转器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
