叠加图像不显示

这是一个JSF 2.0 + Primefaces 3.5应用程序。我有一个弹出对话框确认删除所选项目。一旦用户选择确认，javascript就会生成2个div作为覆盖层:一个是半透明层，另一个是旋转车轮gif图像。一旦后端删除过程完成(需要几秒钟)，页面就会刷新，覆盖层就会消失。

这是我的对话框代码，我使用primefaces对话框标签:

    <p:dialog id="confirmRemove"
        header="Remove Confirmation" severity="alert"
        widgetVar="confirmation" modal="true" resizable="false">
        <h:panelGrid columns="1">
            <h:panelGroup id="message">
                <h:outputText id="confirmMsg"
                     value="Are you sure you want to remove the selected item?" escape="false"/>
            </h:panelGroup>
            <p:commandButton id="confirm" value="Remove"
                onclick="confirmation.hide();loadOverlay()"
                actionListener="#{myBackingBean.addInfo()" ajax="false"/>
         </h:panelGrid>
    </p:dialog>

下面是我的javascript代码:

    function loadOverlay()
    {
        var overlay = jQuery('<div id="overlay"d></div>');
        overlay.appendTo(document.body);
        var overlay_img = jQuery('<div id="overlay_img"><img src="../images/spinning-wheel.gif"/></div>');
        overlay_img.appendTo(document.body);
    }

下面是我的样式表:

    #overlay {
        position:fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 10000;
    }
    #overlay_img {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 1.0 !important;
        z-index: 10001;
    }

我的问题是:一旦确认对话框的删除按钮被点击，叠加显示，但不是图像。如果我在javascript函数loadoverlay()的末尾添加一个警告语句，那么图像就会显示出来。另外，如果我将p:commandButton ajax="false"更改为ajax="true"(默认模式)，图像也会显示出来。但显然，这不会工作，这意味着我必须手动刷新页面，使覆盖消失。我也不认为这和Primefaces有什么特别的关系。我尝试使用JSf标签h:commandButton，观察到同样的问题。

我只是想补充一下，如果我使用调试器(firebug)来检查loadOverlay的原始代码，图像也会正常显示。

我还做了一个实验，在loadOverlay函数的末尾添加一个循环运行1秒。如果我在没有调试器的情况下运行，在点击"删除"按钮后，页面会冻结一秒钟，然后再继续部署覆盖层(没有图像)。但是如果我用调试器运行它，结果将在语句执行后立即显示在屏幕上。例如，在语句"overlay. appendto (document.body)"之后，覆盖将立即被部署。这让我觉得调试器非常不可靠:这似乎表明调试器运行在与实际交易不同的流上。

我一直在Firefox(20.0)上测试我的代码。我刚刚在IE(8)上尝试过，令我惊讶的是，它在IE上运行得很好。这是浏览器的问题

<p:dialog id="confirmRemove"
    header="Remove Confirmation" severity="alert"
    widgetVar="confirmation" modal="true" resizable="false">
    <h:panelGrid columns="1">
        <h:panelGroup id="message">
            <h:outputText id="confirmMsg"
                 value="Are you sure you want to remove the selected item?" escape="false"/>
        </h:panelGroup>
        <p:commandButton id="confirm" value="Remove"
            onclick="confirmation.hide();loadOverlay()"
            oncomplete="removeOverlay();"
            actionListener="#{myBackingBean.addInfo()}" />
     </h:panelGrid>
</p:dialog>

function removeOverlay() {
    element = document.getElementById('overlay_img');
    element.parentNode.removeChild(element);
    element = document.getElementById('overlay');
    element.parentNode.removeChild(element);
}