How to use in Richfaces to show animate gif during page loading?

Question

The question is in the title :) I know how to do it with an ajax call using something like that but i'm getting lost when it comes with the client loading.

with Ajax call, it's ok for me :

          <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#    {rich:component('statPane')}.hide()" />
            <h:form id ="numberOfLineTab_form">
              ...
                <rich:popupPanel id="statPane" autosized="true">
                    <h:graphicImage value="/img/ajax-loader.gif" alt="ai" />
                    Please wait...
                </rich:popupPanel>
            </h:form>

No code to show with client because i'm stucked with that and i haven't found an example to develop yet ... I've already done it before on a cgi perl project with Jquery but I don't remember :(

I'd like to use the embed jquery functionality. Something like that I use for hiding some tab... But what selector used to the whole page ? and how you check the loading in jquery javascript ?

    <rich:jQuery selector="#formSortParticipant\:customListParticipant\:closeParticipant"  event ="click" query="jQuery('#formSortParticipant').hide('slow')" attachType="live"/>

The idea is to mix all to rich my goal of showing a popup gif image when the client load the page.

Thanks folks :)