学步园

用asp.net不好实现实时的无刷新进度条，服务器控件中的代码里面不能直接调用Js代码，只能通过控件本身的事件来触发js函数。用原生的xmlhttp容易判断页面是否加载完毕，不过要实现复杂的逻辑就麻烦了。
今天看到一个构思巧妙的无刷新的Loading页面，javascript的威力真是大。
html页面代码：

<!--js函数文件-->
<script language="JavaScript" type="text/javascript" src="js/main.js"></script>
<script type="text/JavaScript">
<!--显示loading的表格 -->
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr><td id="td_hb" height=140>
</td></tr></table>
<!--显示图片背景 -->
<table border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td><img src="images/index_18.gif" width="25" height="180" border="0" usemap="#img1Map" name="img1"
id="img1" /></td>
</tr>
</table>
<!--用户用来切换页面内容的链接 -->
<map name="img1Map" id="img1Map">
<area shape="rect" coords="2,3,24,89" href="JavaScript:show(1);" />
<area shape="rect" coords="1,92,24,178" href="JavaScript:show(2);" />
</map>
<script language=javascript id=JSChange></script>

js/main.js代码

function show(n)
{
td_hb.innerHTML = "<br> <img src=images/Loading.gif>"
if( n == 1)
{
switchImage("img1","images/index_18.gif");
JSChange.src = "js/show.aspx?id=1";}
if( n == 2)
{
switchImage("img1","images/index2_18.gif");
JSChange.src = "js/show.aspx?id=2";}}
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}}}

js/show.aspx返回的内容是：
td_hb.innerHTML = '需要显示的内容';

Created by jecray