Jquery Ajax正在加载图像

Question

我想为我的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);
    }   
});

如何在此代码中实现加载图像。 感谢

Answer 1

描述

您应该使用jQuery.ajaxStart和jQuery.ajaxStop执行此操作。

1. 使用您的图片创建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()

Answer 2

尝试这样的事情：

<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>

Answer 3

它有点晚了，但如果你不想特别使用div，我通常会这样做......

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

ReplaceDiv也是Ajax插入的div。所以当它到达时，图像会被替换。

Answer 4

请注意： ajaxStart / ajaxStop不适用于ajax jsonp请求（ajax json请求没问题）

我在写这篇文章时使用的是jquery 1.7.2。

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