如何防止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應用程序啓動項目中的閃爍？

回答

相關問題