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

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

loading

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

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

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

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

然后在里添加一个onload，变成（当然啦，其中也可以有其他的代码，但onload只能有一个）：

?View Code HTML
1

<body onload="remove_loading()">

用

?View Code JAVASCRIPT
1
2

//<![CDATA[
//]]>

注释javascript代码，使之满足XHMTL 1.0 标准。