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集中在我放置所有功能的地方。

还有其他方法可以有效地运行吗？

我还添加了以下“库”：

<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>

我在模板页面中添加了这个“标题”，我的应用程序的所有页面都在使用：

<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"

也就是说，我想以一般的方式做到这一点，我的应用程序的所有页面都继承此函数“等待”，从而显示图像。

这是一个例子，这正是我想要做的，我想在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）？

1 个答案: