等待,等待,等待...

先上代码

<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动态的调整赋值。

loading.style.width=$(window).width();
loading.style.heigth=$(window).height();

waiting-waiting-waiting

<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>

重要的一句是

ld.style.display="none";

div部分的代码写在之后,有些时候页面加载时间很短,就看不到等待的效果,可以把onload函数改成下面的,就可以看到效果了

	div onload="winload();">
	<script language="JavaScript">
	function winload(){
	setTimeout(
	function(){
	alert("111111");
	ld.style.display="none";
	  f8=true;
	  },1000);
	
	}
</script>