有两类方法：

1 动态方法

1.1 动态添加／删除类名

<p class="box"></p>

.loading{xxxxx}

$.ajax({
    url:xxx,
    data:xxx,
    method:xxx,
    dataType:xxx,
    beforeSend:function(){
        $('.box').addClass('loading');
    },
    success:function(){
        $('.box').removeClass('loading');
    }
})

1.2 动态添加／删除标签

$.ajax({
    url:xxx,
    data:xxx,
    method:xxx,
    dataType:xxx,
    beforeSend:function(){
        $('.box').append('<p class="loading"></p>')
    },
    success:function(){
        $('.box').find('.loading').remove();
    }
})

1. 静态法

   2.1 删除类名

   <p class="box loading"><p>
   

   $.ajax({
       //....
       success:function(){
           $('.box').removeClass('.loading');
       }
   })
   

   2.2 删除标签

   <p class="box"><p class="loading"></p></p>
   

   $.ajax({
       //...
       success:function(){
           $('.box').find('.loading').remove();
       }
   })
   

默认显示loading动画，在ajax获取到数据后隐藏它。

Css3 实现的动画不需要 js

网页中的loding效果是先直接显示，然后等js加载完再删除或隐藏这个loding