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 -->
</div>[+] Show Full Post
If your page takes more than a few seconds to load, you may want to add a loading indicator to inform the visitors that page loading is still in progress. The page loading indicator is usually in some form of animated GIF. This post shows some samples of GIF images that can be used as a loading indicator.
For...
[+] Show Full Post
Related Posts
