Question

我正在使用fadeToggle来显示＆＃34;忙碌＆＃34; ajax调用期间的图像。当ajax调用花费一两秒钟时，这可以正常工作。但是当ajax调用几秒钟时，繁忙的图像直到ajax调用结束时才会显示 - 它似乎发生在所有浏览器中。

这是图片：

<img id="globalBusy" class="hide" src="/Content/Images/globalbusy-live.gif" alt="Busy" title="Busy" width="52" style="display: none;"></a>

这是ajax调用：

$("#globalBusy").fadeToggle(200, "linear");

$.ajax({
    url: GetData(),
    type: "POST",
    data: JSON.stringify(requestModel),
    datatype: "json",
    contentType: "application/json; charset=utf-8",
    timeout: 60000,
    success: function (model) {
        $("#globalBusy").fadeToggle(400, "linear");
    }
})

我尝试刷新图像，但它没有用。当你到达成功函数时它仍然只能正确显示，所以你只能简单地看到它。

Answer 1

您需要确保第一个fadeToggle位于jQuery文档就绪函数$(function() {....});中。否则它将无法执行，因为它找不到#globalBusy图像。

示例在这里工作：

/* Ignore this command - just for mocking up an ajax response */
$.mockjax({
  url: '/testajax',
  type: 'post',
  responseTime: 8000,
  responseText: {
    status: 'success',
    message: 'Working!'
  }
});

$(function() {
    $("#globalBusy").fadeToggle(200, "linear");
    $("#status").text("Loading....");

    $.ajax({
        url: '/testajax',
        type: "POST",
        data: { test: "test" },
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        timeout: 60000,
        success: function (model) {
            $("#globalBusy").fadeToggle(400, "linear");
            $("#status").text("Success....");
        }
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<img id="globalBusy" class="hide" src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="Busy" title="Busy" width="52" style="display: none;">
<div id="status"></div>

在长时间的Ajax调用期间fadeToggle

1 个答案: