Question

我是GWT的新手，我确信这在某个地方得到了解答，但我还没有找到

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

然而，我很惊讶在运行它时，有一种不愉快的闪烁......

文本加载时没有CSS
需要一段时间，直到选择框apears

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

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

似乎这个应用程序按此顺序加载:(如果我把它混合起来，请纠正我，这只是我的猜测）

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

所以我无法以编程方式在加载GWT之前添加一个加载微调器，对我来说有点像一个问题

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

我在想添加一个带动画gif的div，并在onload事件中 - 隐藏它。

但我确信有更好的东西。

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

更新：发现这个related question，虽然没有回答我......

Answer 1

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

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

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

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

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

使用带有GWT的微调器非常容易。一种简单的方法是将它保存在HTML文件本身的id中。然后，在onModuleLoad()中，只需通过调用RootPanel.get("spinner").setVisible(false);

隐藏该div

这应该显示旋转器直到GWT加载自身。

Answer 2

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

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

    <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。 e.g。

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

Answer 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为“loading”的div。对于每个样本（扩展视口），在onAttach（）（初始化）中调用GXT.hideLoadingPanel（loadingPanelId），它隐藏了加载框架。

检查视口here

的源代码

检查GXT.hideLoadingPanel here

的源代码

你可以用类似的方式做到这一点。

Answer 4

您可以在主页中放置HTML加载消息（使用样式属性或在标题中嵌入样式标记以确保其样式化），并在模块加载后删除消息，例如： G。 Document.get（）。getBody（）with .setInnerHTML（“”）或.removeChild（），然后以编程方式呈现您的应用程序。

如何防止Web应用程序入门项目中的GWT onload闪烁？

4 个答案: