一、先下载一个简单的gif等待图片
例如我用的是我命名为“loading.gif”的图片,如下所示:
二、制作一个或者多个div层来分别实现:覆盖层+展示gif等待图片层
举例
- 覆盖层:
<div id="bg" class="bg"></div>
bg就是background的意思,此div层是为了覆盖掉页面正文的所有内容,背景色看具体页面而定,CSS后面会下面会写出。
- 等待图片层:
<div id="loading" class="loading">加载中。。。</div>
注意:等待图片层,要写在覆盖层前面,CSS后面会下面会写出。
- 两层的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>