Blinking during of rendering pages with custom elements (FOUC issue)

StackOverflow https://stackoverflow.com/questions/22411219

Pergunta

I use dart-polymer package to create custom elements. I have noticed that there is some blinking during of page with the custom elements loading. This effect also is visible for the very simple ClickCounter app. Is there any way to avoid this vexing blinking?

The issue is good described in Wikipedia http://en.wikipedia.org/wiki/Flash_of_unstyled_content

The suggested solution from http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention does not work for the simple application (polymer: '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++;
  }
}

see also the created issue in code.google.com https://code.google.com/p/dart/issues/detail?id=17498

Foi útil?

Solução

Polymer 0.9.5
The class names to use are polymer-veiled (hidden) and polymer-unveil (during unveil transition) If it is different than in Polymer.js it is probably subject of change but as of PolymerDart 0.9.0 it should work.

The relevant code is in packages/polymer/src/boot.dart.

Polymer 0.10.0
Polymer 0.10.0-pre.1 uses already the unresolved attribute like explained here
Polymer - Styling reference - FOUC prevention

You need to add a version constraint in pubspec.yaml to get the development version like
polymer: ">=0.10.0-pre.1"

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top