JQuery+CSS3實現Ajax加載時loading效果

        以前經過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圖片代替。