自定义JS加载等待动画loading

最新推荐文章于 2025-10-15 10:26:47 发布

原创最新推荐文章于 2025-10-15 10:26:47 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #load

js 专栏收录该内容

8 篇文章

订阅专栏

本文展示了如何使用jQuery EasyUI创建一个自定义的加载等待动画。通过调用`ajaxLoading()`和`ajaxLoadEnd()`函数，可以在AJAX请求开始时显示动画，并在请求完成后移除。代码中提供了CSS动画效果的实现，以及在AJAX请求前后调用相关函数的例子。

     闲话少说，上代码：
 
      如下为加载数据时的等待css动画，效果如图：
      ![这里写图片描述](https://img-blog.youkuaiyun.com/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);
               }
      })
```