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.ajaxStart和jQuery.ajaxStop来做到这一点。
- 用你的形象创build一个div
- 使它在
jQuery.ajaxStart可见 - 把它隐藏在
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
