ajax进行异步请求数据添加loading效果

在与后台实现数据交互时经常会遇到一种这样的情况：

1.需要用一个ajax请求后台数据，并且要在获取到数据之后再渲染到页面，这个时候就必须用同步（async:false）。

2.然而在这个时候就会有另一种情况，当ajax的请求花费的时间比较长的时候需要一个loading层来显示等待状态

3.这个时候beforeSend是没有效果的，即使把loading的代码写在ajax之前也不行。

4.原因就是ajax的async设置为false时浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。

5.解决方法（注意：是在异步下实现的）：如图

loading效果的实现可以使用gif图片，当然，移动端，使用CSS3动画是更好的选择，列举一个demo地址：http://cssload.net/  

比如，在这里我选择了这样一个效果，然后点击GET CODE 按钮，就可以得到代码：

#fountainG{
   
   
position:relative;
margin:10% auto;
width:240px;
height:29px}

.fountainG{
   
   
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
}

#fountainG_1{
   
   
left:0;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}

#fountainG_2{
   
   
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}

#fountainG_3{
   
   
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}

#fountainG_4{
   
   
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}

#fountainG_5{
   
   
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}

#fountainG_6{
   
   
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}

#fountainG_7{
   
   
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}

#fountainG_8{
   
   
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
}

@-moz-keyframes bounce_fountainG{
   
   
0%{
-moz-transform:scale(1);
background-color:#33cc99;
}

100%{
   
   
-moz-transform:scale(.3);
background-color:#0099cc;
}

}

@-webkit-keyframes bounce_fountainG{
   
   
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
}

100%{
   
   
-webkit-transform:scale(.3);
background-color:#0099cc;
}

}

@-ms-keyframes bounce_fountainG{
   
   
0%{
-ms-transform:scale(1);
background-color:#33cc99;
}

100%{
   
   
-ms-transform:scale(.3);
background-color:#0099cc;
}

}

@-o-keyframes bounce_fountainG{
   
   
0%{
-o-transform:scale(1);
background-color:#33cc99;
}

100%{
   
   
-o-transform:scale(.3);
background-color:#0099cc;
}

}

@keyframes bounce_fountainG{
   
   
0%{
transform:scale(1);
background-color:#33cc99;
}

100%{
   
   
transform:scale(.3);
background-color:#0099cc;
}

}

同时也包含html结构：

<div id="fountainG">
                    <div id="fountainG_1" class="fountainG">
                    </div>
                    <div id="fountainG_2" class="fountainG">
                    </div>
                    <div id="fountainG_3" class="fountainG">
                    </div>
                    <div id="fountainG_4" class="fountainG">
                    </div>
                    <div id="fountainG_5" class="fountainG">
                    </div>
                    <div id="fountainG_6" class="fountainG">
                    </div>
                    <div id="fountainG_7" class="fountainG">
                    </div>
                    <div id="fountainG_8" class="fountainG">
                    </div>
</div>

最后，将html结构放在比如文章列表或者其他需要Ajax请求加载的地方，然后使用JQuery来实现最终的效果：

function loadingEffect() {
    var loading = $('#fountainG');
    loading.hide();
    $(document).ajaxStart(function () {
        loading.show();
    }).ajaxStop(function () {
        loading.hide();
    });
}
loadingEffect();