Display an image in blockUI

Question

I am working with primefaces and jsf2. I need to display an image after a clicking on commandButton and to be hidden when the action is done. Everything works fine, but image in the blockUI doesn't show up.

 <p:panel id="panelform" header="Email Extractor"  >
        <p:messages id="messages" /> 
        <h:panelGrid id="formulaire" columns="2">  
              <p:commandButton value="Extract" update="tableemails" id="ajax"  widgetVar="extractButton"
                                                 action="#{mailMB.searchEmails()}" 
                                                 icon="ui-icon-disk" styleClass="ui-priority-primary"
                                                 onstart="blockUIWidget1.block()" oncomplete="blockUIWidget1.unblock()"/>  
        </h:panelGrid>
        <pe:blockUI  target="formulaire"  widgetVar="blockUIWidget1">  
              <h:panelGrid columns="2"> 
                    <img src="../../pictures/animated-loading-bar.gif" width="264" height="34" alt="animated-loading-bar"/>
                    <h:outputText value="Please wait..." style="white-space: nowrap;"/>  
               </h:panelGrid>  
        </pe:blockUI>
 </p:panel>  

Here is my directory structure:

Answer 1

After reading alot of forums i found that BlockUI only listens to AJAX calls! It doesn't work with full page (non AJAX) requests. It only works when ajax="true"