如何在Web Application Starter项目中防止GWT onload闪烁？

我是GWT的新手，我确信这在某处得到了回答，但我还没有找到答案

我下载了GWT2.0Eclipse插件，很高兴看到它附带了一个插件

然而，我很惊讶，当运行它时，有一个不愉快的闪烁

文本加载时不首先使用CSS

需要一段时间，直到选择框出现

（如果看不到闪烁，请尝试并按F5刷新）

在那之前，所有成熟的GWT应用程序似乎都有一个加载器，但我没有找到一个简单、标准的方法来添加它

看起来这个应用程序的加载顺序如下：（如果我弄错了，请纠正我，这只是我的猜测）

• 基本布局HTML
• 所有的JavaScript和CSS
• 在“onload”事件上运行逻辑（编译的javaScript最快可以启动-？）

因此，我无法在GWT加载之前以编程方式添加加载微调器，这对我来说有点麻烦

我缺少一些基本的东西吗？是否有最佳实践方法添加初始微调器

我想简单地添加一个带有动画gif的div，然后在onload事件中隐藏它

但我相信还有更好的

如果这是一个重复的问题，请告诉我

---

---

更新：找到了这个，但没有回答我的问题…

我以前处理过这个问题，没有使用GWT模块加载CSS，而是直接将其加载到标记本身中。如果这样做，浏览器将始终首先加载CSS，甚至在加载GWT JS之前

这意味着您将失去一点灵活性和速度，但这是我迄今为止使用的唯一解决方法

编辑：额外信息因为我想要赏金：D

如果不删除

从module.gwt.xml文件中，然后gwt标准主题加载到gwt创建的JS文件中。这个JS文件在HTML页面呈现后加载，并在加载后注入CSS。因此闪烁

为了避免闪烁，您可以注释掉该行，并将自己的样式表插入HTML文件的

。这可以确保在HTML呈现之前加载CSS，避免任何闪烁。如果您真的想要GWT主题，您可以从中获得它

与GWT一起使用微调器非常简单。一种简单的方法是将它保存在一个div中，并在HTML文件本身中添加一个id。然后，在

onModuleLoad（）

中，通过调用

RootPanel.get（“spinner”）.setVisible（false）来隐藏该div

这将显示微调器，直到GWT加载
 您可以在主机页中放置HTML加载消息（使用样式属性或在标题中嵌入样式标记以确保其样式化），并在模块加载后删除该消息，例如。G使用.setInnerHTML（“”）或.removeChild（）对.get（）.getBody（）进行文档化，然后以编程方式显示您的应用程序。
以下是实现微调器的步骤

在加载应用程序的脚本行（即带有nocache.js的脚本行）下方放置类似于以下HTML的内容。e、 g:

埃兰：恐怕上述答案中提到的练习是目前唯一的方法。GWT不提供类似的功能来显示/隐藏“动态加载”帧。我想其中一个原因是，对于所有GWT用户来说，这个要求并不“普遍”，一个人可能想要一种和其他人截然不同的“加载”方式。所以你必须自己去做

您可以查看GXT showcase页面（也基于GWT）：了解他们是如何做到这一点的。对于它的源代码，请在此处下载Ext GWT 2.1.0 SDK：并在解压缩后检查samples/explorer文件夹。有关详细信息，请参见下面的编辑：

编辑

检查源代码，您可以看到id为“loading”的div。对于每个示例（扩展视口），在onAttach（）中调用GXT.hideLoadingPanel（loadingPanelId）（初始化），这将隐藏加载帧

检查视口的源代码

检查GXT.hideLoadingPanel的源代码

你可以用类似的方法来做。
是的。我使用的模式是在主机页中放置一个'loading，please wait…'div，然后在onModuleLoad（）方法中删除该元素。很好。我已经知道这个替代方案，甚至是在问题中：“我想简单地添加一个带有动画gif的div，在onload事件中-隐藏它”，但我正在寻找更正式、更少黑客的东西。如果您认为GWT团队没有正式的最佳实践解决方案，请告诉我支持它的来源。我还没有看到标准实践，我相信不需要。要有创意！谢谢，但这是官方的GWT方法吗？我不能让谷歌提供标准的主题CSS，这样你就可以在现实世界的项目中对它进行评论。顺便说一句，你建议的hide spinner div on load方法已经在我的问题主体中了。GWT主题非常好，在动态构建页面的情况下也能很好地工作。。。在那里你看不到一丝闪烁。只有在使用静态HTML和动态小部件的组合时才会发生这种情况，但这种情况并不经常发生。如果您已经对微调器进行了完整的编码，那么很抱歉，当您提到onLoad时，我以为您在主体上使用了javascript onLoad之类的东西。
    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}