Milestone Lab: September 2007

LOADING ...

<p><data:post.body/></p>

, as follows:

<!-- START: Loading Indicator: Top -->
<span expr:id='"loading-" + data:post.id' style='font-size:75%;'>
  <img width='16' height='16' src='http://i74.photobucket.com/albums/i265/jennzhen/loading/CircleBall.gif' style='vertical-align:middle'/> LOADING ...
</span>
<span expr:id='"loaded-" + data:post.id' style='display:none'>
<!-- END: Loading Indicator: Top -->

<p><data:post.body/></p>

<!-- START: Loading Indicator: Bottom -->
</span>
<!-- END: Loading Indicator: Bottom -->

Part 2 – Script
The purpose of this part is to show the actual page contents after the page loading has been completed. It will also hide the loading indicator.

The script below should be placed after

<div id='blog-posts'>

, immediately before

</div>

, as follows:

<div id='blog-posts'>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:loop>

<!-- START: Loading Indicator: Script -->
<script type='text/javascript'>
window.onload=function(){
<b:loop values='data:posts' var='post'>
  document.getElementById("loading-<data:post.id/>").style.display='none';
  document.getElementById("loaded-<data:post.id/>").style.display='inline';
</b:loop>
}
</script>
<!-- END: Loading Indicator: Script -->