How to display "Loading.." while loading div

Question

I have a JSF page with charts without AJAX support. I noticed that the time of loading of the charts is very slow. Is it possible for example to load the body of the JSF page and to display "Loading..." inside the DIVs where the charts are positioned while the chart is being loaded? I use Primefaces for charts generation.

Answer 1

you can use this prime-faces ajax code while you are trying to load

<p:ajax event="page" update=":statusbar"  onstart="statusDialog.show();" oncomplete="statusDialog.hide();" onerror="statusDialog.hide();"/>

from ajax you are calling to this dialog box

    <p:dialog widgetVar="statusDialog" id="statusbar" modal="true" showHeader="false" closable="false" width="250" resizable="false">
          <h:form>
//You can also give loading image here
            <div class="ft-row ft-center"><img src="#{request.contextPath}/resources/images/loding.gif" /></div>
            <h5>Please wait..</h5>
          </h:form>
        </p:dialog>