Я использую пакет dart-polymer для создания пользовательских элементов. Я заметил, что во время загрузки страницы с пользовательскими элементами происходит некоторое мигание. Этот эффект также виден для очень простого приложения ClickCounter. Есть ли способ избежать этого раздражающего мигания?
Проблема хорошо описана в Википедии http://en.wikipedia.org/wiki/Flash_of_unstyled_content.
Предлагаемое решение с сайта http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention не работает для простого приложения (полимер: «0.10.0-pre.2»).
<html>
<head>
<title>Click Counter</title>
<!-- import the click-counter -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body unresolved>
<h1>CC</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
@published int count = 0;
ClickCounter.created() : super.created() {
}
void increment() {
count++;
}
}
см. также созданную задачу на code.google.com https://code.google.com/p/dart/issues/detail?id=17498
