先上代码
1
2
3
4
5
| <div id="ld" style="position:absolute; opacity:0.5;left:-2px; top:-2px; width:100%; height:100%; background-color:#393939; z-index:1000;">
<div id="loading" style="width:1758px;height:700px;display:table-cell;vertical-align:middle;text-align:center;">
<img src="loading.gif" style="vertical-align:middle;"/>
</div>
</div>
|
以上是为了锁屏，可以放在body里面，显示的时候，此div会因为z-index:1000,所以加载之后，会出现此div的样式；为了美观起见，所以使用了opacity透明0.5再加上颜色效果就好看了许多。
width heigth 是需要100% 才能覆盖整个body的，
Position 是为了让div脱离文档流，方便在下一步中display:none;的时候不会影响到其他文档的位置。
最后需要说明一下，里面一个div的宽和高，是为了让图片可以在屏幕的中间，最好可以使用js动态的调整赋值。
1
2
| loading.style.width=$(window).width();
loading.style.heigth=$(window).height();
|
waiting-waiting-waiting
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script type="text/javascript">
var count=0;
setTimeout(
function(){
alert("111111");
showpage();
ld.style.display="none";
f8=true;
},1000);
function showpage(){
count++;
console.log(count);
if(count%2==0){
ld.style.display="none";
}
}
</script>
|
重要的一句是
1
2
|
ld.style.display="none";
|
div部分的代码写在之后,有些时候页面加载时间很短,就看不到等待的效果,可以把onload函数改成下面的,就可以看到效果了
1
2
3
4
5
6
7
8
9
10
11
12
| div onload="winload();">
<script language="JavaScript">
function winload(){
setTimeout(
function(){
alert("111111");
ld.style.display="none";
f8=true;
},1000);
}
</script>
|
