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

【问题标题】：Show image (GIF) when a JSF page is loading?加载 JSF 页面时显示图像 (GIF)？
【发布时间】：2015-10-07 10:46:07
【问题描述】：

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

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

【问题讨论】：

如果您不使用 jsf（如您提到的 php），您将如何在 html 中执行此操作？在这里做同样的事情......
我想在 JSF 中执行此操作，我编辑了我的问题。
是的，我知道，但是 JSF 在这方面只是一个 html 生成器。你想要的是客户端。客户端，一切都是html......所以基本的解决方案没有什么不同。
谢谢，还有其他方法吗？最好的选择是什么？

标签： jsf jsf-2

【解决方案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 会导致我的页面出现一些崩溃

【讨论】：