Question

我使用dart-polymer包来创建自定义元素。我注意到在加载自定义元素的页面中有一些闪烁。对于非常简单的ClickCounter应用程序，此效果也是可见的。有没有办法避免这种令人烦恼的眨眼？

维基百科http://en.wikipedia.org/wiki/Flash_of_unstyled_content

中描述了这个问题

来自http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention的建议解决方案不适用于简单的应用程序（聚合物：＆＃39; 0.10.0-pre.2＆＃39;）..

<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

中的已创建问题

Answer 1

聚合物0.9.5
要使用的类名是polymer-veiled（隐藏）和polymer-unveil（在推出过渡期间）如果它与Polymer.js不同，它可能会发生变化，但从PolymerDart 0.9.0开始，它应该有效。

相关代码位于packages/polymer/src/boot.dart。

聚合物0.10.0
聚合物0.10.0-pre.1已使用unresolved属性，如此处所述 Polymer - Styling reference - FOUC prevention

您需要在pubspec.yaml中添加版本约束以获得开发版本，例如
polymer: ">=0.10.0-pre.1"

使用自定义元素渲染页面时闪烁（FOUC问题）

1 个答案: