加载JSF页面时显示图像（GIF）？

我试图表明使用这些功能在我的网页加载图像：加载JSF页面时显示图像（GIF）？

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

来源

2015-10-07 Edson Cezar

如果你不使用jsf（你提到的PHP），你会如何做到这一点在HTML中？在这里做同样的... – Kukeltje

我想在JSF中做到这一点，我编辑了我的问题。 –

是的，我知道，但JSF在这方面只是一个html生成器。而你想要的是客户端。客户端，一切都是html ...所以基本的解决方案是没有什么不同。 – Kukeltje

我使用一些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}" />

最后，它的工作对我很好，我相信it'sa更好的选择，而不是JavaScript的使用，因为使用JavaScript导致一些崩溃在我的网页

来源

2015-10-15 11:31:05

加载JSF页面时显示图像（GIF）？

回答

相关问题