html - 在 GWT 中加载图像

Question

我一直在使用 GWT 开发一个元素，我需要显示一个加载图像，如“请稍候...”。

我能够在页面加载之前解决这个问题。但是在历史 token 更改期间，我无法显示相同的内容。我创建了一个分区，如下所示，

<div id="loader">
            <div id="loaderPanel">
            </div>
            <div id="loaderImage">
                <div id="loaderText">
                    <b>Please Wait...</b>
                </div>
                <img src="images/loader.gif"/>
            </div>
        </div>

此外，这是我的 CSS

#loaderPanel {
    background-color: white;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}


#loaderImage {
    background-color: transparent;
    left: 48%;
    position: fixed;
    top: 48%;
    z-index: 1002;
}

#loaderImage img{
    height:22px;
    margin-left:4px;
    margin-top:0px;
    width:119px;
}   

#loaderText{
    font-family:'Verdana';
    font-weight:bold;
    font-size:0.9em;
    float:left;
}

这是我用来使 DIV 可见和不可见的代码。

DOM.getElementById("loader").getStyle().setDisplay(Display.NONE);
DOM.getElementById("loader").getStyle().setDisplay(Display.BLOCK);

任何人都可以建议我一个更好的方法来显示历史更改的加载 GIF 图像吗？

Answer 1

您应该实现 HistoryListener 并在调用 onModuleLoad() 方法时显示 gif:

http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/History.html