自定义JS中的加载等待动画loading

闲话少说，上代码：

如下为加载数据时的等待css动画，效果如图：
![这里写图片描述](https://img-blog.csdn.net/20180816112802275?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzMzODc1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

//采用jquery easyui loading css效果
function ajaxLoading() {
$("<div class=\"datagrid-mask\"></div>").css({
display: "block",
width: "100%",
height: $(window).height()
}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({
display: "block",
left: ($(document.body).outerWidth(true) - 190) / 2,
top: ($(window).height() - 45) / 2
});
}

function ajaxLoadEnd() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}

接着在需要的地方，如ajax的js代码中加上相关function，如下：

$.ajax({
url: $url,
type: 'POST',
dataType: 'json',
beforeSend:function () {
***ajaxLoading()***;
},
success: function (data) {
$widget.datagrid('loadData', data);
***ajaxLoadEnd()***;
$.slideMsg($.I18N('查询成功'));
},error:function (xhr,status) {
ajaxLoadEnd();
$.alert($,xhr.msg);
}
})