用图片动画实现的提示页面载入中

网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验（UE）很不错，之前我用了javascript代码来实现类似WindowsXP的滑动快载入效果（《提示页面载入中的JS代码》），现在用gif动画来更简单地实现，同时也能避免一些由于javascript处理和浏览器兼容而产生的问题。

我从higod.cn借用来图片（虽然它也是借用ourhtml.com），这个图片做得很棒，大小也不过是1.89 KB：

以下是我基于我网站本身使用的代码，其中主要几点是：1.在firefox里，相对于浏览器位置固定（fixed），也就是不随滑动条滑动而移动。2.设置为透明，透明度为85%。3.位置提高，设置为离最上方为70px。4.宽度在#loader的width里设置，我设置为200px。5.我将载入时整个页面的背景设置为深蓝色，而载入提示框设置为极浅蓝色。6.我调用的图片位置在于http://heymu.com/images/loading.gif，请下载到自己的网站上，修改代码来调用，如果想调用我的图片嘛……有点不厚道。以上这些是个人选择，可以根据自己的需要来修改。

以下是代码，这次我仍是使用浅蓝色色系的颜色，请把它加入到<head></head>部分尽量靠前的部分。

<style type="text/css">
#loader_container {
text-align:center;
position:fixed;
top:70px;
left:0;
width:100%;
z-index:10000;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
* html #loader_container {
position:absolute;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:12px;
color:#004a8f;
background-color:#ecf5ff;
display:block;
width:200px;
border:1px solid #81b9ff;
text-align:left;
margin:0 auto;
padding:5px 0;
}
#loader div {
margin: 4px 0;
}
</style>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
document.write('<div id="loader_container"><div id="loader"><div align="center">页面正在很用力de加载中……</div><div align="center"><img src="http://heymu.com/images/loading.gif" alt="loading" /></div></div></div>');
function remove_loading() {
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
//]]>
</script>