JQuery 数据加载中禁止操作页面

比较常见的做法,但对我而言是第一次做,记录一下。

为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime。

有学到一些额外的东西。

    先将div及img定义好

<body>
     <div id="loadingDiv">
	<img src="loading.gif" style="margin-top:230px;margin-left:700px;" /> 
     </div>
</body>

  

    注意:在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。

    css样式(重点)

  

#loadingDiv {
	    background-color:grey;
	    filter: alpha(opacity=50); <!--IE的透明度-->
	    opacity: 0.1;<!--透明度,数值越大越透明,不要调太小,不然gif图片会特别模糊-->
	    display: none;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 100%;
	    z-index: 100; <!--此处的图层要大于页面-->
	    display:none;
    }

    注意:此处用的id样式,页面初始化即启用,且已在样式内将该div设置为不显示。

              之后将在js内动态调整它的隐藏与显示属性。当它显示时,将会遮盖住整个body,

              用户无法对页面进行任何操作。

   javascript代码:

function loadData(){
		//弹出遮盖层
		$("#loadingDiv").fadeTo(200,0.5);
		
	    $.ajax({
            url: 'xx/xx!query.action',
            dataType:"json",
            type: 'POST',
            success: function(data) { 	

			     //此处是加载列表数据的代码
			     
				 //数据加载完毕,则关闭遮盖层
				 $("#loadingDiv").fadeOut(200);
			     
            }
        });
	}

  

    注意:这里用了fadeTo和fadeOut来显示和隐藏div,当然也可以用 show 和 hide。

  

相关推荐