自定义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);
               }
      })