jQuery when().then() 在 AJAX 调用期间显示加载

Question

我正在 CodeIgniter 上使用 jQuery 开发一个 Web 应用程序，我正在尝试创建一个 javascript 函数来在 ajax 调用期间显示 ajax 加载图像。在我的示例中，ajax 调用成功，但加载从未显示，所以我认为问题是“when”中的第一个函数未执行。有人可以帮我解决这个问题吗？谢谢

http://jsfiddle.net/fEnPz/8/

HTML

<div id="form"></div>​

CSS

#form {
  height: 300px;
  width: 350px;
}

.loadingOverlay {
  border: 1px solid #EFEFEF;
  background-color: #D8DCDF;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  padding: 10px;
  z-index: 1;
  -moz-opacity: 0.50;
  opacity: 0.50;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
}​

Javascript

function displayLoading(Container, Callback) {
    var height = Container.height();
    var width = Container.width();
    $.when(function() {
      Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="http://www.ajaxload.info/images/exemples/2.gif" /></div>');
      Container.find(".loadingOverlay").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });
      Container.find(".ajaxLoading").position({
          "my": "center center",
          "at": "center center",
          "of": Container
      });
    }, Callback()).then(function() {
      Container.find(".loadingOverlay").hide().remove();
    });
}

displayLoading($("#form"), function() {
    $.ajax({
      url: 'http://search.twitter.com/search.json',
      dataType: 'jsonp',
      data: {
            q: 'ConceptionAb6'
      },
      success: function(results) {
        // Only for testing the loading
        setTimeout(function() {
          alert(results.max_id);
        }, 2000);
      },
      error: function() {
        alert("error!");
      }
    });
});

Answer 1

为了制作ajax加载动画，只需这样做:

$("<img src='loading.gif'/>").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

它利用 jQuery 的内置全局 ajax 事件，只要发生 $.ajax() 调用就会触发这些事件，并将它们绑定(bind)到您的动画元素。