適當的爲你的ajax添加上loading

好久沒有寫博客了，每天忙...唉

jquery的封裝過的ajax用起來實在太方便了，我們再也不用寫那麼多考慮瀏覽器的問題，爲我們節省了大量時間與精力。其實ajax用起來的體驗確實不錯，但最近忙的項目中我總感覺使用ajax數據還未完全返回到瀏覽器端時，稍稍枯燥的等待不舒服，所以用個loading感覺就好多了。

寫了個loading的效果，因爲時間關係，暫時只寫了個很簡單的模擬效果。

其實原理很簡單，beforeSend的時候展現你的loading效果，complete的時候再移除或隱藏掉：

<mce:script type="text/javascript" src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></mce:script> <mce:script type="text/javascript"><!-- google.load('jquery','1.4'); // --></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $('a#testA').click(function(){ $.ajax({ beforeSend:function(){ $('div#response').css({background:'white'}); $('div#response img').css('display','inline'); }, complete:function(){ //其實這裏如果有必要，我們也完全可以用setTimeout設置個稍稍的延時這樣也許效果也會更好 $('div#response img').css('display','none'); }, type:'GET', url:'http://www.google.com.hk/search', data:'q=cff', success:function(responseText){ //alert(responseText); //$('div#response img').css('display','none'); $('div#response').html(responseText); }, error:function(){ alert('error!'); } }); }); }); // --></mce:script> <mce:style><!-- div#response{width:100%;height:1600px;border:1px solid green;} --></mce:style><style mce_bogus="1">div#response{width:100%;height:1600px;border:1px solid green;}</style> <a id=testA href="#" mce_href="#">Test</a><pre> <div id=response> <img src="http://www.lavc.edu/virtualvalley/images/loading.gif" mce_src="http://www.lavc.edu/virtualvalley/images/loading.gif" style="display:none" mce_style="display:none"/> </div>