我目前正在研究是否有可能使用Google的Polymer-project来完成我正在设计的项目.
我一直在玩聚合物,但我现在遇到一个问题,实际上是摇摇我不想使用它,但不确定这是一个错误还是可能我做错了.
问题出现在谷歌浏览器和Internet Explorer中,虽然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>
以上是我用于我的Polymer演示的代码.
有没有其他人有这个问题,是否有一种解决方法,以阻止这种情况发生.
立即获胜是使用Vulcanize,Polymer的HTML导入连接工具将所有这些导入粉碎成单个文件.在polyfill'd浏览器下,众所周知,这可以加快速度.还要确保使用--csp --inline标志运行以进行进一步优化.
另外需要注意的是<script>阻止主页解析.<head>HTML导入块中的脚本编写者).尝试将脚本移动到页面底部.见http://www.html5rocks.com/en/tutorials/webcomponents/imports/#perf-parsing
| 归档时间： |
|
| 查看次数： |
2142 次 |
| 最近记录： |