Contenido bajo demanda (on scroll)

Descripción

En ocasiones nuestra página tiene mucho contenido y alguno es demasiado pesado, por tanto nos gustaría poder recargarlo según vamos haciendo scroll en la página para que la carga inicial sea rápida.

Ejemplo

Por favor, haz scroll hacia abajo. Por defecto el contenido de los Blocks no se ha cargado, y cuando este está visible, una petición AJAX obtiene el cuerpo final del bloque. Puedes abrir las "herramientas de desarrollador" de tu navegador para monitorizar las peticiones y los KB al cargar la página.

Este método es muy útil para cargar widgets de Facebook o Twitter que pesan alrededor de 300Kb- 500Kb.

Continue scroll to load a Facebook Widget

Código fuente

<t:layout 
   xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd" 
   xmlns:p="tapestry:parameter" >
   
   <h3>${message:page.description}</h3>
   <t:textoutput value="message:ajax.ShowContentOnDemandPage.description"/>
   
   <h3>${message:page.example}</h3>
   
   <div style="min-height: 1000px;">
   
   <t:textoutput value="message:ajax.ShowContentOnDemandPage.example"/>
   <t:textoutput value="message:ajax.ShowContentOnDemandPage.example2"/>
   </div>
   
   <t:zone t:id="sampleZone" id="sampleZone">
      <i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
   </t:zone>
   
   <!-- Block with the content you want to show on demand -->
   <t:block t:id="sample">
      <h3>Sample body!</h3>
   </t:block>
   
   <div style="min-height: 400px">
      <p>Continue scroll to load a Facebook Widget</p>
   </div>
   
   <t:zone t:id="sampleFacebookZone" id="sampleFacebookZone">
      <i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
   </t:zone>
   
   <!-- A example of posible real block to use this method -->
   <t:block t:id="facebookWidget">
      <div class="fb-page" data-href="https://www.facebook.com/pages/El-cocinero-casero/772682686161139" 
            data-hide-cover="false" data-show-facepile="true" data-show-posts="false" data-width="400">
         <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/pages/El-cocinero-casero/772682686161139">
            <a href="https://www.facebook.com/pages/El-cocinero-casero/772682686161139">El cocinero casero - Facebook</a>
            </blockquote>
         </div>
      </div>
   </t:block>
   
   <h3>${message:sourcecode}</h3>
   <t:tabGroup>
      <t:codeTab source="classpath:es/carlosmontero/webapp/t5devutil/pages/ajax/ShowContentOnDemandPage.tml"/>
      <t:codeTab source="classpath:es/carlosmontero/webapp/t5devutil/pages/ajax/ShowContentOnDemandPage.java" />
      <t:codeTab classpathSource="/META-INF/modules/content-on-demand.js" />
   </t:tabGroup>
</t:layout>