在渲染之前执行代码

时间:2013-05-16 05:49:36

标签: dart

当我加载页面时,在Dart开始修改内容之前,我会看到原始页面(只是很短的时间)。我该如何避免这种情况?

示例

档案index.html

<html>
    <head>
        <script type="application/dart" src="app.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </head>
    <body>

    </body>
</html>

档案app.dart

main(){
    var d = new DivElement(); 
    d.text = "This is a test";
    query('body').append(d);
}

在这个例子中,我首先看到一个空白页面,然后,不久之后,文本“这是一个测试”。我只希望看到文字。

2 个答案:

答案 0 :(得分:4)

页面将显示在文本之前,因为您的Dart代码将在初始渲染之后运行(至少通常)。您可以在文档顶部应用一些白色图层,并在完成Dart代码后将其删除:

<body>
  <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000000;"></div>
</body>

然后当你的Dart代码准备好显示应用程序时:

query('#overlay').remove();

现在您将看到一个空白页面,直到Dart代码准备好显示某些内容。

答案 1 :(得分:0)

如果您在正文的开头加载JS脚本,它将在页面加载之前执行。所以,你会这样做:

<html>
    <head>...</head>

    <body>
        <script src="packages/browser/dart.js"></script>
        <script type="application/dart" src="app.dart"></script>    
    </body>
</html>

那应该有用。如果没有,Dart内部可能会发生一些事情,这会导致这种情况。