如何防止Web应用程序启动项目中的GWT onload闪烁？
我是 GWT 的新手，我确信这在某处得到了解答，但我还没有发现
我下载了 GWT 2.0 eclipse 插件，并且很高兴看到它带有 启动项目。
然而，令我惊讶的是，在运行它时，出现了令人不快的闪烁...
- 首先在没有 CSS 的情况下加载文本
- 需要一段时间，直到选择框出现
（如果您没有看到闪烁，请尝试按 F5 刷新）
所有成熟的 GWT 应用程序似乎在此之前都有一个加载程序，但我没有找到一种简单、标准的方法来添加它。
看来这个应用程序按以下顺序加载：（如果我混淆了，请纠正我，这只是我的猜测）
- 基本布局 HTML，
- 所有 JavaScript 和 CSS
- 在“onload”事件上运行逻辑（编译后的 javaScript 可以启动的最快时间） - ？）
所以我无法在加载 GWT 之前以编程方式添加加载旋转器，这对我来说有点困难
我是否缺少一些基本的东西？有没有添加初始微调器的最佳实践方法？
我想简单地添加一个带有动画 gif 的 div，然后在 onload 事件中隐藏它。
但我确信还有更好的东西。
让我知道这是否是重复的问题
更新：发现这个 相关问题，但没有回答我的......
I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
- The text loads without the CSS first
- It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
- Basic layout HTML,
- All JavaScript, and CSS
- Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我之前已经处理过这个问题，方法是不使用 GWT 模块加载 CSS，而是直接在标签本身中加载它。如果这样做，浏览器将始终首先加载 CSS，甚至在加载 GWT JS 之前也是如此。
这意味着您将失去一点灵活性和速度，但这是我迄今为止使用的唯一解决方法。
编辑：额外信息，因为我想要赏金：D
如果您不删除
为了避免闪烁，您可以注释掉该行并将您自己的样式表插入到 HTML 文件的
中。这可以确保 CSS 在 HTML 渲染之前加载，避免任何闪烁。如果您确实想要 GWT 主题，可以从 源代码。将旋转器与 GWT 一起使用非常容易。一种简单的方法是将其保存在 HTML 文件本身带有 id 的 div 中。然后，在
onModuleLoad()中，只需通过调用RootPanel.get("spinner").setVisible(false);隐藏该 div，这应该会显示微调器，直到 GWT 加载本身。
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/>from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.To avoid the flicker, you can comment out that line and insert your own stylesheet into the
<head>of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the
onModuleLoad(), simply hide that div by callingRootPanel.get("spinner").setVisible(false);That should show the spinner till GWT loads itself.
这是我们实现旋转器的方法。
您可以将类似以下 HTML 的内容放在加载应用程序的脚本行下方（即带有 nocache.js 的脚本行）。例如：
然后在您的应用程序 EntryPoint 中，您使用 DOM 进入页面并删除该 div。例如
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
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)，这会隐藏加载框架。
检查 Viewport 的源代码 此处
查看 GXT.hideLoadingPanel 的源代码 此处
您可以用类似的方式进行操作。
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
您可以在主页中放置 HTML 加载消息（使用样式属性或在标头中嵌入样式标签以确保其样式化），并在模块加载后删除该消息，例如 Document.get().getBody( ) 与 .setInnerHTML("") 或 .removeChild()，然后以您想要的方式以编程方式呈现您的应用程序。
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.