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

Question

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:

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

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

How would you do this in html if you were not using jsf (php like you mention)? Do the same here... — Kukeltje, Oct 07 '15 at 11:20
Yes, I know, but JSF in this regard is just an html generator. And what you want is client side. Client side, everything is html...so the basic solution is no different. — Kukeltje, Oct 07 '15 at 12:06
Thanks, is there other ways to do it ? What is the best option ? — Edson Cezar, Oct 08 '15 at 17:55

Edson Cezar · Accepted Answer · 2015-10-15T12:10:40.940

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

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

1 Answers1