Content on demand (on scroll)


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.


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

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