画面中追加loading效果

啥也不说，直接上代码

/**
* 加载loading效果
* @returns
*/
function addLayer() {
if ( $("#layerDialog").length == 0) {
  var bmnDiv = ""
      + "<div class='modal' id='layerDialog' style='width:100%; height:100%;position: fixed;z-index: 9998;background-color: #fff;opacity: 0.8;left:0px;top:0px;'>"
      + "    <div style='width:100%; height:100%;display:table;'>"
      + "       <div style='display: table-cell; vertical-align: middle; text-align:center;'>"
      + "           <div style='display:inline-block; float:none; text-align:left; margin-right:-4px;'>"
      + "              <img src='img/load.gif'/>"
      + "           </div>"
      + "       </div>"
      + "    </div>"
      + "</div>";
  $(document.body).prepend(bmnDiv);
}else{
	$("#layerDialog").show();
}
}
/**
* 取消loading效果
* @returns
*/
function clearLayer() {
try {
	setTimeout(function(){$("#layerDialog").hide();},200);
  } catch (err) {
  }
}

$(function(){
	$("#btnLogin").on("click", function(){
		//加载
        addLayer();
		var data = $("#USBWWForm").serializeArray();
		data = parseJson(data);
		$.ajax({
			type: "post",
			url: "/USBWW/login",
			dataType: "json",
			contentType: "application/json",
			scriptCharset: "utf-8",
			async: true,//异步
			data: JSON.stringify(data)
		}).done(function(data){
			if (data.returnCode == "0") {
				// 成功
                。。。。
			} else {
				alert(data.message);
			}
		}).fail(function(jqXHR, textStatus, errorThrown){
			alert("fail");
		}).always(function( jqXHR, textStatus ){
			//消除
            clearLayer();
		});
		
	});
});

效果图

附：浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程--包括gif图的动效）都会停止下来。

如对你有用的话请给个赞或评论，谢谢