0 Replies Latest reply on Aug 13, 2010 6:55 AM by Adrien Adrien

    Image lazy loading

    Adrien Adrien Apprentice

      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