Image lazy loading

[jadtn]

Hi

I have a rich:datagrid which contains images, I want images are lazy loading: during loading page a message 'loading..' is display on each image and when the image is downloaded the message 'loading' disapear and the image is displayed.

There is someone which has a solution to dot it?

Thanks

Adrien

<rich:dataGrid border="0" width="100%" id="resus" columnClasses="w50,w50" rendered="#{resultsHolder.resultSize>0}" value="#{resultsHolder.searchResult}" var="ac" columns="2" elements="#{resultsHolder.requestParameters.nbItemsByPage}" first="#{resultsHolder.requestParameters.firstOfPage}" rowKeyVar="nritem" stateVar="st">
                <f:facet name="header">
                <h:panelGroup>                    
                    <rich:datascroller ajaxSingle="true" immediate="true" id="top" reRender="bot"   page="#{resultsHolder.requestParameters.nrPageUp}" />
                </h:panelGroup>
                </f:facet>
                <rich:panel id="pres">                   
                    <h:panelGroup rendered="#{not empty ac.urlPhotoCV}" style="float:left">
                        <h:graphicImage styleClass="imgborder" id="imcvx" value="#{ac.urlPhotoCV}" />
                        <rich:toolTip immediate="true" mode="ajax" for="imcvx" followMouse="true" layout="block">
                            <h:graphicImage styleClass="imgborder" value="#{ac.urlPhoto}" height="350" />
                        </rich:toolTip>
                    </h:panelGroup>
                </rich:panel>
                <br />
                <f:facet name="footer">
                    <rich:datascroller id="bot" reRender="top"   page="#{resultsHolder.requestParameters.nrPageUp}" ajaxSingle="true" immediate="true"/>
                </f:facet>
            </rich:dataGrid>            
        </h:panelGroup>
    </h:form>
    <h:panelGroup>
                
    </h:panelGroup>

Lazy loading image