求生欲极低的加载等待动画——适合不要求交互效果的页面加载使用

一、先下载一个简单的gif等待图片

例如我用的是我命名为“loading.gif”的图片，如下所示：

二、制作一个或者多个div层来分别实现：覆盖层+展示gif等待图片层

举例

1. 覆盖层：

<div id="bg" class="bg"></div>

bg就是background的意思，此div层是为了覆盖掉页面正文的所有内容，背景色看具体页面而定，CSS后面会下面会写出。

2. 等待图片层：

<div id="loading" class="loading">加载中。。。</div>

注意：等待图片层，要写在覆盖层前面，CSS后面会下面会写出。

3. 两层的CSS：

.loading{width:160px;height:56px;position:absolute;top:50%;left:50%;line-height:56px;color:#fff;padding-left:60px;font-size:15px;background:#000 url(${pageContext.request.contextPath}/images/loading.gif) no-repeat 10px 50%;opacity:0.7;z-index:9999; -moz-border-radius:20px; -webkit-border-radius:20px;border-radius:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.bg{width:100%;height:100%;top:0;left:0;padding-left:0px;font-size:0px;background:#fff;opacity:0.7;z-index:9999; -moz-bflow-radius:20px; -webkit-bflow-radius:20px;bflow-radius:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

三、编写jQuery代码来实现当页面加载完毕后让覆盖层和gif等待图片层隐藏

写在jQuery里，如下图所示，使用window.onload方法

<script type="text/javascript">
	window.onload=function(){
	    $("#loading").hide();
	    $("#bg").hide();
	}
</script>

完毕！