如何防止 Web Application Starter Project 中的 GWT onload 闪烁？答案

【问题标题】：How to prevent GWT onload flicker in the Web Application Starter Project?如何防止 Web Application Starter Project 中的 GWT onload 闪烁？
【发布时间】：2010-01-09 19:41:16
【问题描述】：

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

我下载了 GWT 2.0 eclipse 插件，很高兴看到它带有starter project。

但是，令我惊讶的是，在运行它时，会出现令人不快的闪烁......

文本在没有 CSS 的情况下加载
选择框出现需要一段时间

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

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

似乎这个应用程序按以下顺序加载：（如果我把它弄混了，请纠正我，这只是我的猜测）

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

所以我不能在加载 GWT 之前以编程方式添加加载微调器，这对我来说有点 22

我错过了一些基本的东西吗？有没有添加初始微调器的最佳实践方法？

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

但我确信还有更好的东西。

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

更新：找到了这个related question，虽然没有回答我的...

【问题讨论】：

标签： gwt onload spinner

【解决方案1】：

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

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

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

如果您不删除 <inherits name='com.google.gwt.user.theme.standard.Standard'/> 从你的 module.gwt.xml 文件中，然后 GWT 标准主题被加载到 GWT 创建的 JS 文件中。该 JS 文件在 HTML 页面呈现后加载，并在加载后注入 CSS。因此闪烁。

为避免闪烁，您可以注释掉该行并将您自己的样式表插入 HTML 文件的 <head>。这可确保您的 CSS 在 HTML 呈现之前加载，避免任何闪烁。如果你真的想要 GWT 主题，你可以从source code 中获得它。

在 GWT 中使用微调器非常简单。一种简单的方法是将它保存在一个 div 中，并在 HTML 文件本身中有一个 id。然后，在onModuleLoad() 中，通过调用RootPanel.get("spinner").setVisible(false); 来隐藏该div

这应该会显示微调器，直到 GWT 自行加载。

【讨论】：

谢谢，但这是官方的 GWT 方法吗？我不能相信 Google 提供标准主题 CSS 只是为了让您在现实世界的项目中将其注释掉。顺便说一句，您建议的加载时隐藏微调器 div 方法已经在我的问题中。
GWT 主题非常棒，在动态构建页面的情况下也能正常工作……您不会看到闪烁。只有在使用静态 HTML 和动态小部件的组合时才会发生这种情况——这种情况并不经常发生。
对不起，如果您已经完全编写了微调器，当您提到 onLoad 时，我以为您在 body 上使用了 javascript onLoad 或其他东西。

【解决方案2】：

这是我们为实现微调器所做的工作。

您在加载您的应用程序的脚本行（即带有 nocache.js 的那个）下方放置了类似以下 HTML 的内容。例如：

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

然后在您的应用程序 EntryPoint 中，您使用 DOM 进入页面并删除该 div。例如

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

【讨论】：

【解决方案3】：

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

您可以查看 GXT 展示页面（也基于 GWT）：http://www.extjs.com/explorer/ 了解他们是如何做到的。对于它的来源，请在此处下载 Ext GWT 2.1.0 SDK：http://www.extjs.com/products/gxt/download.php 并在解压后检查 samples/explorer 文件夹。有关详细信息，请参阅下面的编辑：

编辑

查看http://www.extjs.com/examples/explorer.html 的源代码，您可以看到一个id 为“正在加载”的div。对于每个样本（扩展视口），在 onAttach()（初始化）中调用 GXT.hideLoadingPanel(loadingPanelId)，隐藏加载帧。

查看视口源代码here

查看GXT.hideLoadingPanel源代码here

你可以用类似的方式来做。

【讨论】：

【解决方案4】：

您可以在主机页面中放置一条 HTML 加载消息（使用样式属性或在标题中嵌入样式标签以确保其样式化），并在您的模块加载后删除该消息，例如。 G。 Document.get().getBody() 与 .setInnerHTML("") 或 .removeChild()，然后以编程方式呈现您的应用程序。

【讨论】：

是的。我使用的模式是在主机页面中放置一个“正在加载，请稍候...” div，然后在 onModuleLoad() 方法中删除该元素。工作正常。
我已经知道这个替代方案，甚至在问题中：“我想简单地添加一个带有动画 gif 的 div，并在 onload 事件中 - 隐藏它”但我正在寻找一些更官方和更少hacky的东西。如果您认为 GWT 团队没有官方的最佳实践解决方案，请告诉我支持它的来源
我还没有看到一个标准的做法，我相信不需要一个。发挥创意！