自定义简单loading

1.loading.gif

 

2.div层(放在body最开头)

<!-- loading begin -->

<div id="cover" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:9998; background-color:#fff; display:none; filter:alpha(opacity=45); opacity:0.45;"></div>

<div id="loading" style="position:absolute; left:40%; top:40%; width:20%; height:20%; z-index:9999; text-align:center; display:none;"><img src="images/loading.gif"></img></div>

<!-- loading end -->

 

注意标红部分的100%，如果页面存在滚动条，则100%只能遮住页面的可视部分，滚动条下面的会遮不住。为解决这个问题，要把100%改成具体的数值，比如1000px。

 

3.js控制

function loading(flag){

  if(flag){

    $("#cover").show();

    $("#loading").show();

  } else {

    $("#cover").hide();

    $("#loading").hide();

  }

}

 

4.效果图