jQuery的Ajax加载图像

我想为我的jquery ajax代码(这是jquery仍在处理的时候)实现一个加载图像,下面是我的代码:

$.ajax({ type: "GET", url: surl, dataType: "jsonp", cache : false, jsonp : "onJSONPLoad", jsonpCallback: "newarticlescallback", crossDomain: "true", success: function(response) { alert("Success"); }, error: function (xhr, status) { alert('Unknown error ' + status); } }); 

我怎样才能在这个代码中实现一个加载图像。 谢谢

尝试这样的事情:

 <div id="LoadingImage" style="display: none"> <img src="" /> </div> <script> function ajaxCall(){ $("#LoadingImage").show(); $.ajax({ type: "GET", url: surl, dataType: "jsonp", cache : false, jsonp : "onJSONPLoad", jsonpCallback: "newarticlescallback", crossDomain: "true", success: function(response) { $("#LoadingImage").hide(); alert("Success"); }, error: function (xhr, status) { $("#LoadingImage").hide(); alert('Unknown error ' + status); } }); } </script> 

描述

你应该使用jQuery.ajaxStartjQuery.ajaxStop来做到这一点。

  1. 用你的形象创build一个div
  2. 使它在jQuery.ajaxStart可见
  3. 把它隐藏在jQuery.ajaxStop

样品

 <div id="loading" style="display:none">Your Image</div> <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script> $(function () { var loading = $("#loading"); $(document).ajaxStart(function () { loading.show(); }); $(document).ajaxStop(function () { loading.hide(); }); $("#startAjaxRequest").click(function () { $.ajax({ url: "http://www.google.com", // ... }); }); }); </script> <button id="startAjaxRequest">Start</button> 

更多信息

  • jQuery.ajaxStart()
  • jQuery.ajaxStop()

它有点晚,但如果你不想特别使用div,我通常这样做…

 var ajax_image = "<img src='http://img.dovov.comLoading.gif' alt='Loading...' />"; $('#ReplaceDiv').html(ajax_image); 

ReplaceDiv也是Ajax插入的div。 所以当它到达时,图像被replace。

请注意:ajaxStart / ajaxStop不适用于ajax jsonp请求(ajax json请求可以)

我写这个时使用jquery 1.7.2。

这里是我发现的参考之一: http : //bugs.jquery.com/ticket/8338