Periodic refresh of a book's dynamic pages using turn.js

I have created an example of dynamically generated content to be viewed using turn.js using the sample provided here.

This is the part of the code that I have so far:

<body>
   <div id="paper">
   </div>
</body>

<script type="text/javascript">
    $(window).ready(function() {
        $('#paper').turn({pages: 12});
    });

    $('#paper').bind('turning', function(e, page) {
          var range = $(this).turn('range', page);
          for (page = range[0]; page<=range[1]; page++)
            addPage(page, $(this));
        });

    function addPage(page, book) {
           // Check if the page is not in the book
          if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />').html('Loading…');
            // Add the page
            book.turn('addPage', element, page);
            // Get the data for this page   
           $.ajax({url: "getPage?filename=abcd&page="+page})
             .done(function(data) {
               element.html(data);
             });
           }
        }
</script>

getPage is a jsp that returns <div class="page"><img src="docs/local/abcd_1.png" alt="" /></div> or any other page number as per the ajax request.

The problem I have is that the png's requested may or may not be available on the web server at the time of the request. They will become available a few (or sometimes many) seconds later. So I would like to be able to display some default "Loading..." type content if a png is not available and refresh periodically (i.e. every x seconds) until the actual png becomes available. I don't have a problem changing the output of getPage if required.

Solution

I have managed to make this work myself by proceeding with the following changes:

getPage now returns <div class="loader"><img src="docs/local/ajax-loader.gif" alt="" /></div> if the png requested is not available.

In the calling page I have changed my code to check for the 'loader' string, and if found (which means the png is unavailable), then I call setTimeout, to retry getting the image after a given amount of time:

<body>
   <div id="paper">
   </div>
</body>

<script type="text/javascript">
    $(window).ready(function() {
        $('#paper').turn({pages: <s:property value='pages'/>});
    });

    $('#paper').bind('turning', function(e, page) {
          var range = $(this).turn('range', page);
          for (page = range[0]; page<=range[1]; page++)
            addPage(page, $(this));
        });

    function addPage(page, book) {
           // Check if the page is not in the book
          if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />').html('Loading…');
            // Add the page
            book.turn('addPage', element, page);
            // Get the data for this page   
            refreshPage(element,page);
          }
        }

    function refreshPage( element, page )
    {
           $.ajax({url: "getPage?filename=<s:property value='filename'/>&page="+page})
             .done(function(data) {
               if( data.indexOf( "loader") > -1 )
               {
                   setTimeout(function() {
                       refreshPage(element,page);
                    }, 5000);
               }
               element.html(data);
             });
    }

Maybe there is a better way to achieve this but at least it works.