加载状态的实现

 

.shade {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #FFFFFF;
	z-index:99999;
	filter:alpha(opacity=100); /* IE */
	-moz-opacity: 1; /* Moz + FF */
	opacity: 1; /* 支持CSS3的浏览器（FF 1.5也支持）*/
	display: none;
}

.shade table{
	top: 0;
	left: 0;
	height: 70%;
	width: 100%;
	margin-top: 10%;
}

.shade .tip{
	color: #000000;
	font-weight: 500;
	font-size: 1.3em;
	margin-bottom: 20px;
}

 

<div class="shade">
	<table>
		<tbody>
			<tr>
				<td align="center" valign="middle"><p class="tip"></p><img src='/static/img/common/load.gif' /></td>
			</tr>
		</tbody>
	</table>
</div>

 

function _shade(msg) {
    $(".shade .tip").text(msg);
    $(".shade").css("display","block");                                 //展示提示信息
    setTimeout(function () {                                            //延时100毫秒展示是为了兼容火狐浏览器
        $(".shade img").attr("src","");                                 //清空img中的src属性,然后再次加入src属性是为了兼容IE浏览器
        $(".shade img").attr("src", "/static/img/common/load.gif");
    },100);
}

使用：

_shade("数据请求中，请稍候...");

$.ajax({
    type: "GET",
    url: "/kscd/api/single_login/auth/",
    data: {access_token: access_token},
    dataType: 'json',
    success: function(data){
        if(data.ret){
        	$(".shade").hide();
        }else{
            toastr.error(data.msg, "错误提示");
        }
    },
    error: function(){
        toastr.success(data.msg, "信息提示");
    }
});