Question

我正在使用jQuery在CodeIgniter上开发一个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()调用发生时随时触发，并将它们绑定到动画元素。

Answer 2

问题似乎是在函数中包含了ajax调用。这很好用：

function displayLoading(Container, Callback) {
    var height = Container.height();
    var width = Container.width();

      Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="/img/ajax-loader.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
      });

    $.when($.ajax({
      url: 'http://search.twitter.com/search.json',
      dataType: 'jsonp',
      data: {
            q: 'ConceptionAb6'
      },
      success: function(results) {
        setTimeout(function() {
          alert(results.max_id);
        }, 2000);
      },
      error: function() {
        alert("error!");
      }
    })).then(function() {
      Container.find(".loadingOverlay").hide().remove();
    });
}

displayLoading($("#form"));

我已经了解了延迟对象如何在jQuery中工作并找出了不同的方法。 http://colonelpanic.net/2011/11/jquery-deferred-objects/

Answer 3

在我看来，当使用多个异步请求时，$ .when更常见。在你的情况下，我会使用：

$.ajax({
    beforeSend: function() {
        var Container = $("#form");
        var height = Container.height();
        var width = Container.width();
        Container.append('<div class="loadingOverlay" style="width: '+ width +'px; height: '+ height +'px;"><img class="ajaxLoading" src="/img/ajax-loader.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
        });
    },
    url: 'http://search.twitter.com/search.json',
    dataType: 'jsonp',
    data: {
        q: 'ConceptionAb6'
    },
    success: function(results) {
        alert(results.max_id);
    },
    error: function() {
        alert("error!");
    },
    complete: function() {
        $("#form").find(".loadingOverlay").hide().remove();
    }
});

Answer 4

将displayLoading()剥离到我得到的骨头......

function displayLoading(Container, Callback) {
    ...
    $.when(function(){...}, Callback()).then(function() {
        ...
    });
}

...显示$.when()未正确使用。

$.when()期望它的所有参数都是promises，而不是任何一个参数。

第一个参数：一个从未被调用的函数。
第二个参数：一个被调用但不返回promise的函数。

此外，$.when()是不必要的，因为只涉及一个承诺（$ .ajax（）返回的jqXHR）。

我认为你想要的模式是这样的：

function displayLoading(container, promise) {
    //create a spinner in container if not already created
    //show spinner
    //hide other content
    promise.done(function() {
        //hide spinner
        //show other content
    });
}

displayLoading($("#form"), $.ajax({
    //ajax options
});

jQuery when（）。then（）在AJAX调用期间显示加载

4 个答案: