您的足迹:首页 > 前端 >jquery实现异步加载loading图标

jquery实现异步加载loading图标

要实现异步加载loading的功能的方法多种多样,下面我介绍下我用过的一种

先通过绝对定位或者相对定位定位好要显示的图片,并且设为不可见


<div class="loading" style="display:none;position:relative;left:300px;top:10px"><img src="img/loading.gif" ></div>


然后在异步ajax的时候,添加beforeSend和complete两个方法,目的是在发送的时候显示该等待图片,完成的时候再隐藏该图标


$.ajax({
    beforeSend: function(XMLHttpRequest) {
              $(".loading").show();
               $("tbody").hide();
          },
         complete: function(XMLHttpRequest) {
          $(".loading").hide();
           $("tbody").show();
          },
   type: "GET",
         url: "advertiser/list_account_balance",
         data:{number:page},
         dataType: "json",
         success: function(data){
                  }
      
  });


 

等待时候的图片

 

 QQ图片20150624104009.png

成功后的图片

 

QQ图片20150624104031.png

 

本博客所有文章如无特别注明均为原创。作者:小天复制或转载请以超链接形式注明转自 钟天才的博客
原文地址《jquery实现异步加载loading图标

相关推荐

网友评论(0)