JQuery+CSS3实现Ajax加载时loading效果

浏览数：19 / 时间：2015年06月09日

之前通过Ajax请求加载数据的时候，在数据还没有呈现出来前，为了更好的用户体验，总会弄个loading告诉用户其实内容正在加载，而不是网站崩了。但是貌似之前使用gif图片的情况比较多，可能是为了兼容各个浏览器，但是CSS3已经很强大到我们可以自己使用动画写出一个loading效果出来，然后再通过调用JQuery的ajaxStart()和ajaxStop()这两个事件处理函数，就可以实现我们想要的loading效果了。

这里主要介绍一个CSS3 loading的网站：http://cssload.net/ ，通过使用这个网站，我们可以通过几步就轻松地使用CSS3完成我们想要的loading效果，然后一键获得代码：

比如，在这里我选择了这样一个效果，然后点击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();

这样就完成了，具体喜欢哪个loading效果，该网站提供了十几种效果，已经够用了。当然如果你觉得这些效果很简单，也完全可以自己写出来，但对于我这种菜鸟，直接拿来用确实挺方便，效率高，而且还可以读一下源码，给自己一些想法。最后，CSS3实现loading效果确实挺nice，但如果要兼容浏览器的话，最好使用渐进增强方法来实现，确保低版本依旧可以使用gif图片代替。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery+CSS3实现Ajax加载时loading效果