Polymer 聚合物元件需要很长时间才能加载-尤其是在Internet Explorer中
我目前正在研究使用谷歌聚合物项目的可能性，我正在设计一个项目 我一直在玩弄聚合物，但我现在遇到了一个问题，这实际上让我不想使用它，但我不确定这是一个bug还是我做错了什么 这个问题出现在谷歌浏览器和IE浏览器中，尽管IE更糟糕，令人惊讶，令人惊讶 问题是当页面第一次加载时，您会得到一个页面，其中只包含组件的文本部分，所有组件都聚在一起，没有显示样式或颜色，然后几秒钟您就会得到正确的组件。在Chrome浏览器中，这是一瞬间的事情，但IE浏览器加载任何东西都需要2-5秒，就像浏览器加载自定义DOM元素需要一段时间一样Polymer 聚合物元件需要很长时间才能加载-尤其是在Internet Explorer中,polymer,Polymer,我目前正在研究使用谷歌聚合物项目的可能性，我正在设计一个项目 我一直在玩弄聚合物，但我现在遇到了一个问题，这实际上让我不想使用它，但我不确定这是一个bug还是我做错了什么 这个问题出现在谷歌浏览器和IE浏览器中，尽管IE更糟糕，令人惊讶，令人惊讶 问题是当页面第一次加载时，您会得到一个页面，其中只包含组件的文本部分，所有组件都聚在一起，没有显示样式或颜色，然后几秒钟您就会得到正确的组件。在Chrome浏览器中，这是一瞬间的事情，但IE浏览器加载任何东西都需要2-5秒，就像浏览器加载自定义DOM元
<html>
<head>
<title>Polymer Demo</title>
<link type="text/css" href="StyleSheet.css" rel="stylesheet">
<link rel="import" href="components/font-roboto/roboto.html">
<script src="components/platform/platform.js"></script>
<link rel="import" href="components/core-elements/core-elements.html">
<link rel="import" href="components/paper-elements/paper-elements.html">
<link rel="import" href="components/core-ajax/core-ajax.html">
<link rel="import" href="components/paper-dialog/paper-dialog.html">
<link rel="import" href="components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="components/paper-fab/paper-fab.html">
<link rel="import" href="components/paper-toast/paper-toast.html">
<link rel="import" href="components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="components/core-tooltip/core-tooltip.html">
<script>
function toggleDialog(transition) {
var dialog = document.querySelector('paper-dialog[transition=' + transition + ']');
dialog.toggle();
}
function submitRating()
{
var ratings = document.querySelector('#ratings');
alert(ratings.value);
}
function getNotificationState()
{
var value = document.querySelector('#toggleButton').checked;
alert(value);
}
</script>
</head>
<body>
<p>
<paper-button raisedButton class="colored" label="My Raised Button"></paper-button>
<paper-button class="colored" label="Flat Button"></paper-button>
<paper-button label="Non coloured flat button"></paper-button>
<paper-button raisedButton label="Non coloured raised button"></paper-button>
</p>
<p>
<paper-checkbox label="Hello"></paper-checkbox>
</p>
<p>
<paper-button raisedButton label="Show Dialog Centered Transition" onclick="toggleDialog('paper-dialog-transition-center')"></paper-button>
<paper-button raisedButton label="Show Dialog Bottom Transition" onclick="toggleDialog('paper-dialog-transition-bottom')"></paper-button>
</p>
<p>
<paper-fab icon="menu"></paper-fab>
</p
<p>
Some Input: <paper-input label="Your Name - Single Line"></paper-input>
</p>
<p>
Multi line input: <paper-input label="Multiline input" multiline></paper-input>
</p>
<p>
<paper-radio-group>
<paper-radio-button label="Radio Button 1"></paper-radio-button>
<paper-radio-button label="Radio Button 2"></paper-radio-button>
<paper-radio-button label="Radio Button 3"></paper-radio-button>
</paper-radio-group>
</p>
<p>
<paper-slider id="ratings" pin max="10" step="1" value="5"></paper-slider>
<paper-button label="Submit Rating" onclick="submitRating();"></paper-button>
</p>
<p>
<paper-tabs selected="0" role="tablist">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
</p>
<p>
<paper-button raisedButton label="Discard Message" onclick="document.querySelector('#discardMessage').show()"></paper-button>
<paper-button raisedButton label="Get Messages" onclick="document.querySelector('#getMessages').show()"></paper-button>
</p>
<p>
Show Notification:<paper-toggle-button id="toggleButton" change="getNotificationState()"></paper-toggle-button>
</p>
<p>
<core-tooltip label="Click me to save" position="right" tabindex="0">
<paper-button raisedButton label="Save"></paper-button>
</core-tooltip>
</p>
<paper-button label="Go to layout examples" onclick="window.location='layouts.php'"></paper-button>
<!--Toast Notifications-->
<paper-toast id="discardMessage" text="Your message has been discarded"></paper-toast>
<paper-toast id="getMessages" text="Connection Timed Out">
<div style="color: blue;" onclick="alert('Retrying')">Retry</div>
</paper-toast>
<!--Dialog HTML Code-->
<paper-dialog heading="Centered Transition Dialog" transition="paper-dialog-transition-center">
<p>This is some content of the dialog box. Woop Woop</p>
<p>And some more content</p>
<paper-button label="More Info" dismissive></paper-button>
<paper-button label="Decline" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>
<paper-dialog heading="Bottom Transition Dialog" transition="paper-dialog-transition-bottom">
<p>This is some content of the dialog box. Woop Woop</p>
<p>And some more content</p>
<paper-button label="More Info" dismissive></paper-button>
<paper-button label="Decline" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>
</body>
</html>
聚合物演示
函数切换对话框（转换）{
var dialog=document.querySelector（'paper-dialog[transition='+transition+']）；
dialog.toggle（）；
}
函数提交（）
{
var评级=document.querySelector（“#评级”）；
警报（评级值）；
}
函数getNotificationState（）
{
var值=document.querySelector（“#toggleButton”）。选中；
警报（值）；
}
这是对话框的一些内容。呜呜
还有更多的内容
这是对话框的一些内容。呜呜
还有更多的内容
是否有其他人有这个问题，是否有一个解决方法来阻止这种情况发生 一个立竿见影的胜利是使用Polymer的HTML导入连接工具将所有导入压缩到一个文件中。在polyfill'd浏览器下，这会大大加快速度。还要确保使用--csp--inline标志运行，以便进一步优化
另一件需要注意的事情是