Ajax makes asynchronous request data to add loading effect

When implementing data interaction with the background, we often encounter a situation like this:

1. You need to use an ajax to request background data, and to render to the page after getting the data, you must use synchronization ( async:false ) at this time.

2. However, there will be another situation at this time. When the ajax request takes a long time, a loading layer is needed to display the waiting state

3. At this time, beforeSend has no effect, even if the loading code is written before ajax.

4. The reason is that when ajax's async is set to false, the browser's rendering (UI) thread and js thread are mutually exclusive, and page rendering will be blocked when executing js time-consuming operations. There is no problem when we perform asynchronous ajax, but when set to a synchronous request, other actions (the code behind the ajax function, as well as the rendering thread) will stop. Even if my DOM operation statement is before the request, this synchronous request will "quickly" block the UI thread and not give it time to execute. That's why the code doesn't work.

5. Solution (note: it is implemented under asynchronous): as shown in the figure

The loading effect can be achieved using gif images. Of course, on the mobile side, CSS3 animation is a better choice. Here is a demo address: http://cssload.net/  

For example, here I choose such an effect, and then click the GET CODE button to get the 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;
}

}

It also contains the html structure:

<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();