如何防止GWT加载Web应用程序启动项目中的闪烁？

我是新来GWT，我敢肯定这是在某处SO回答，但我还没有找到如何防止GWT加载Web应用程序启动项目中的闪烁？

我下载了GWT 2.0 Eclipse插件，并很高兴地看到它带有一个starter project。

不过，我很惊讶，运行它时，有一个如意的闪烁......

文本负荷没有CSS第一
这需要一段时间，直到选择框apears

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

所有成熟的GWT应用程序本身他们之前有一个加载器，但我没有找到一个简单，标准的方式来添加它。

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

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

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

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

我正在考虑简单地添加一个动画GIF的div，并在onload事件 - 隐藏它。

但我确定有更好的东西。

让我知道，如果这是一个重复的问题

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

来源

2010-01-09 Eran Medan

我已经不使用GWT模块之前处理这个问题加载CSS，但直接加载到标签本身。如果你这样做，浏览器将始终加载CSS，甚至在加载GWT JS之前。

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

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

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

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

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

来简单地隐藏该div，直到GWT加载它才会显示该spinner。

来源

2010-01-10 04:20:57

谢谢，但这是官方的GWT方法吗？ Google无法提供标准主题CSS，因此您会在现实世界的项目中发表评论。顺便提一下，你所建议的隐藏微调器加载方法已经在我的问题的正文中。 – 2010-01-19 07:58:15

GWT主题非常好，在页面动态构建的情况下工作正常......在这里你不会看到闪烁。它只有在使用静态HTML和动态小部件的组合时才会发生 - 这种情况不会经常发生。 – 2010-01-20 04:53:47

对不起，如果你已经完全编码了微调器，当你提到onLoad时，我认为你正在使用一个JavaScript onLoad在身体上或什么东西。 – 2010-01-20 04:55:40

您可以在主机页面中放置HTML加载消息（使用样式属性或在标头中嵌入样式标签以确保其样式），并在模块加载后删除消息， G。 Document.get（）。getBody（）与.setInnerHTML（“”）或.removeChild（），然后以编程方式呈现您的应用程序，但是您需要。

来源

2010-01-14 09:56:40

是的。我使用的模式是在主机页面上放置一个'loading，please wait ...'div，然后删除onModuleLoad（）方法中的那个元素。工作正常。 – AlexJReid 2010-01-14 11:00:08

我已经知道这个选择了，甚至在这个问题上：“我只是想添加一个带有动画GIF的div，并且在onload事件中 - 隐藏它”，但我正在寻找更官方和更少哈希的东西。如果您认为GWT团队没有正式的最佳实践解决方案，请告诉我支持它的来源 – 2010-01-14 11:23:56

我还没有看到标准做法，我相信这不需要是一个标准做法。有创意！ – 2010-01-14 13:50:44

这是我们做什么来实现微调。

你在加载你的应用程序的脚本行（即带有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()); 
}

来源

2010-01-19 14:50:07

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。对于每个样本（扩展Viewport），在onAttach（）（初始化）中调用GXT.hideLoadingPanel（loadingPanelId），隐藏加载框架。视口here

GXT.hideLoadingPanel here

的检查源代码

检查源代码，您可以用类似的方式做到这一点。

来源

2010-01-20 02:56:31 xhh

如何防止GWT加载Web应用程序启动项目中的闪烁？

回答

相关问题