网页中的Loding效果

Question

我用svg和CSS3实现了一个Loding动画，但不知道如何把它应用到网站中，如何使用Js调用，需要监听什么事件，求大神指点。

Answer 1

有两类方法：

1 动态方法

1.1 动态添加／删除类名

<div class="box"></div>

.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('<div class="loading"></div>')
    },
    success:function(){
        $('.box').find('.loading').remove();
    }
})

1. 静态法

   2.1 删除类名

   <div class="box loading"><div>
   

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

   2.2 删除标签

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

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

Answer 2

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

Answer 3

Css3 实现的动画不需要 js

Answer 4

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