jsf/primefaces load indicator during init of the b

In my JSF/Primefaces project, I have a lot of data loading in the init (postconstruct) method of my beans. That's why I would like to show an gif indicator during the bean load.

I tried with primefaces and the Ajax status (programmatic version of the showcase)

http://www.primefaces.org/showcase/ui/ajaxStatusScript.jsf

So I added this to the template of my project

<p:dialog modal="true" widgetVar="loadWidget" header="Status"
    draggable="false" closable="false">

    <p:graphicImage value="../images/ajaxload.gif" />
</p:dialog>

I would like to be able to call loadWidget.show(); at the beginning of the init method of my bean and loadWidget.hide(); at the end.

Do you have an idea where and how to fire the javascript to display the loading gif? Thanks

EDIT

I could add that I tried this. Here is the part of my template that include the content of the page. It's not working either the p:dialog is included before or after the content.

<div class="content">
    <script>loadWidget.show();</script>
        <ui:insert name="body" />
    <script>loadWidget.hide();</script>
</div>

The console says loadWidget is not defined

EDIT2

I will try to explain how my project works. Could be helpful.

Here is my template

<html ... >

<f:view contentType="text/html">

    <h:head> ... </head>

    <h:body>
        <ui:insert name="header" />
        <ui:insert name="menu" />
        <ui:insert name="body" />
        <ui:insert name="footer" />
        ... <!-- Other things -->
    </h:body>
</f:view>   
</html>

Then each page defines the body. Example of a page.

<html ... >

<ui:composition template="myTemplateAbove">

    <ui:define name="body">

            <h:outputText value="#{beanOfMyFirstPage.myText}" />
            <p:commandButton action="#{beanOfMyFirstPage.goToAnotherPage}" />
            ...
        </ui:define>
</ui:composition>

</html>

Then each page is linked to a bean that extends a BaseBean.

@ManagedBean(name = "beanOfMyFirstPage")
@ViewScoped
public class beanOfMyFirstPage extends BaseBean {
    // attributes + getters and setters

    @PostConstruct
    public void init() {
        super.init();
        ... // actions that take time cause of DB requests for example
    }

    public void goToAnotherPage() {
        navigation.handleNavigation(FacesContext.getCurrentInstance(), null, "mySecondPage");
    }

    // methods
}

And the common bean

public class BaseBean {

    @PostConstruct
    public void init() {
        super.init();
        // General actions for all beans
    }

}

I have a solution!

It was very simple and there is nothing to do with primefaces or with the JSF bean construction process.

I just added this in my template (that is included for every pages)

<div id="nonAjaxLoad">
    <img src="../images/ajaxload.gif"/>
</div>

Then I added the css below to move it fixed to the bottom right of the page

#nonAjaxLoad {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
}

And to make it magical, I added this script

<script>
    $(document).ready(function(){
        $('#nonAjaxLoad').hide();
    });

    $(window).bind('beforeunload', function() {
        $('#nonAjaxLoad').show(); 
    });
</script>

So when I leave the page, the loading indicator is shown and when the other page is loaded, it's hidden.

Thanks to everyone that helped especially @Andy