加载JSF页面时显示图像（GIF）？(Show image (GIF) when a JSF page is loading?)

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

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

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

我还添加了以下“库”：

我在模板页面“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"

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

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

在页面加载时显示图像

I'm trying to show a loading image in my pages using these functions:

$(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(); }

But the image does not appear, the pages are loading properly without displaying the image, does anyone know what was going wrong, or if there are other ways to do it?

Not appear any error on the console, I put it in my main loading JS, a single JS centered where I put all my functions.

There are other ways to do this run in an efficient manner?

I add the following "libraries" also:

I add this in a template page, "header", all pages of my application are using:

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

That is to say, I wanted to do this in a general way, in a way that all the pages of my application to inherit this function "wait", thereby displaying the image.

Here an example, thats exactly what I want to do, I want to do the same thing in JSF2:

Show image while page is loading

最满意答案

我使用了一些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导致我的页面崩溃

I finished using some richfaces components, I created a new "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>

Then, I put this code in my page "template.xhtml", every page in my application use this template:

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

Thus, I import this in my pages:

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

And use it in this way:

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

Finally, it worked fine for me, I believe it´s a better option instead a use of JavaScript, because using JavaScript was causing some crashes im my pages

更多推荐

loading,function,页面,电脑培训,计算机培训,IT培训"/> <meta name="descripti