加载 JSF 页面时显示图像 (GIF)？

Question

我正在尝试使用这些函数在我的页面中显示加载图像：

$(document).ready(function(){
    $(".loading").hide();
    $.unblockUI();

    $(".menuLink").focus(function() {
        $(this).addClass('link-menu-selected');
    });

    $(".menuLink").blur(function() {
        $(this).removeClass('link-menu-selected');
    });

});

$(window).bind('beforeunload',function(){
    $(".loading").show();
    $.blockUI({message: null});
});

function exportFile(){
    $('.loading').hide();
    $.unblockUI();

}

但是没有显示图片，页面加载正常但不显示图片，有谁知道哪里出了问题，或者是否有其他方法可以做到？

控制台上没有出现任何错误，我把它放在我的主要加载 JS 中，一个 JS 集中在我放置所有功能的地方。

还有其他方法可以运行有效地做到这一点吗？

我还添加了以下内容"libraries"：

<script type="text/javascript" src="/sign/resources/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/sign/resources/js/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/sign/resources/js/renderAjax.js"></script>

我将其添加到模板页面中，"header"，我的应用程序的所有页面都使用：

<ui:composition template="/layout/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"

也就是说，我想以一种通用的方式来做这个，以一种方式让我的应用程序的所有页面都继承这个功能"wait"，从而显示图像。

这是一个例子，这正是我想要做的，我想在 JSF2 中做同样的事情：

Show image while page is loading

Answer 1

我用完了一些 richfaces 组件，我创建了一个新的 "commandButton.xhtml":

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:cc="http://java.sun.com/jsf/composite">

    <cc:interface>
        <cc:attribute name="action" targets="cmdBtn" />
        <cc:attribute name="readOnly" />
        <cc:attribute name="disable" />
        <cc:attribute name="immediate" />
        <cc:attribute name="styleClass" default="btn btn-primary span2" />
        <cc:attribute name="style" />
        <cc:attribute name="value" />
        <cc:attribute name="render" default=""/>
    </cc:interface>


    <cc:implementation>

        <h:commandButton id="cmdBtn" immediate="#{cc.attrs['immediate']}"
            disabled="#{cc.attrs['disable']}" type="submit"
            readonly="#{cc.attrs['readonly']}" style="#{cc.attrs['style']}"
            styleClass="#{cc.attrs['styleClass']}" value="#{cc.attrs['value']}">
            <a4j:ajax render="#{cc.attrs['render']}" execute="@form" status="waitStatus"/>
        </h:commandButton>

    </cc:implementation>
</ui:composition>

然后，我将此代码放入我的页面 "template.xhtml"，我应用程序中的每个页面都使用此模板：

<a4j:status name="waitStatus"
        onstart="#{rich:component('wait')}.show();"
        onstop="#{rich:component('wait')}.hide();" />
    <rich:popupPanel id="wait" autosized="true" modal="true"
        moveable="false" resizeable="false" zindex="2005">
        <h:graphicImage id="imgWait" library="images" name="wait.gif"
            styleClass="hidelink" />
    </rich:popupPanel>

因此，我将其导入到我的页面中：

xmlns:comp="http://java.sun.com/jsf/composite/components"

并这样使用：

<comp:commandButton styleClass="btn btn-primary span2 offset8" value="Calculate" action="#{myBean.calculate}" />

最后，它对我来说效果很好，我相信这是一个更好的选择，而不是使用 JavaScript，因为使用 JavaScript 导致我的页面出现一些崩溃

加载 JSF 页面时显示图像 (GIF)？

Show image (GIF) when a JSF page is loading?

jsf

jsf-2