Content on demand (on scroll)

Description

Sometimes, our page has a lot of heavy content. Due to that, we would like to get more information while we are scrolling down in order to receive a quick initial response.

Example

Please, scroll down. By default, the content is not loaded and when it is visible, an AJAX request gets the body. You can open developers-tools to analyze the request and KB by loading the page.

This method is very useful to get widgets from Facebook or Twitter which consume around 300Kb - 500Kb.

Continue scroll to load a Facebook Widget

Source code

<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>