JQUERY+CSS3 loading effect When Ajax loading is implemented

Before the data is loaded through the AJAX request, before it is presented, for a better user experience, there is always a loading to tell the user that the content is actually loading, not the site is collapsed. However, it seems that the previous use of GIF pictures is more likely to be compatible with each browser, but CSS3 is already very powerful enough to let us use the animation to write out a loading effect, and then by calling jquery Ajaxstart () and Ajaxstop () With these two event handlers, we can achieve the loading effect we want.

Here is the main introduction of a CSS3 loading website: http://cssload.net/, by using this site, we can easily use the CSS3 in a few steps to complete the loading effect we want, and then a key to get the code:

For example, here I choose the effect, and then click the Get Code button, you can get the codes:

#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:

<DivID= "Fountaing">                    <DivID= "Fountaing_1"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_2"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_3"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_4"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_5"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_6"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_7"class= "Fountaing">                    </Div>                    <DivID= "Fountaing_8"class= "Fountaing">                    </Div></Div>

Finally, put the HTML structure in a list of articles or other places that require AJAX requests to load, and then use jquery to achieve the final result:

function Loadingeffect () {    var loading = $ (' #fountainG ');    Loading.hide ();    $ (document). Ajaxstart (function  () {        loading.show ();    }). Ajaxstop (function  () {        loading.hide ();    });} Loadingeffect ();

This completes, specifically like which loading effect, the website provides more than 10 kinds of effects, already enough. Of course, if you think these effects are simple, but also can write their own, but for me this rookie, directly to use is very convenient, high efficiency, but also can read the source, give yourself some ideas. Finally, CSS3 implementation of the loading effect is very nice, but if you want to be compatible with the browser, it is best to use the progressive enhancement method to achieve, to ensure that the lower version can still use GIF pictures instead.

Jquery+css3 loading effect when Ajax is loaded