2

我正在使用 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!");
      }
    });
});
4

4 回答 4

2

为了制作 ajax 加载动画，只需执行以下操作：

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

它利用 jQuery 的内置全局 ajax 事件，在$.ajax()调用发生时触发并将它们绑定到您的动画元素。

于 2013-07-17T00:49:30.953 回答
1

问题似乎在于将 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/

于 2012-12-28T02:27:12.983 回答
1

在我看来 $.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();
    }
});
​
于 2012-12-28T02:35:55.760 回答
1

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

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

...揭示$.when()没有正确使用。

$.when()期望它的所有论点都是承诺，这不是任何一个论点的情况。

  • 第一个参数：从未调用过的函数。
  • 第二个参数：一个被调用但不返回承诺的函数。

此外，$.when()这是不必要的，因为只涉及一个 promise（由 $.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
});
于 2012-12-28T02:38:45.527 回答