Jquery 在长时间Ajax调用过程中进行fadeToggle

我正在使用fadeToggle在ajax调用期间显示“忙”图像。当ajax调用需要一两秒钟的时间时，这种方法可以很好地工作。但是，当ajax调用持续几秒钟时，直到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");
    }
})

图为：

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

$("#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");
    }
})

---

我尝试刷新图像，但没有效果。它仍然只在您进入success函数时正确显示，因此您只能短暂地看到它。

您需要确保您的第一个fadeToggle位于jQuery document ready函数

$（function（）{…}）中。否则它将不会执行，因为它找不到#globalBusy映像

$("#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");
    }
})

示例在这里起作用：

$("#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");
    }
})


/*忽略此命令-仅用于模拟ajax响应*/
$.mockjax({
url:“/testajax”，
键入：“post”，
答复时间：8000，
答复正文：{
状态：“成功”，
信息：“正在工作！”
}
});
$（函数（）{
美元（“#globalBusy”）.fadeToggle（200，“线性”）；
$（“#状态”）.text（“加载…”）；
$.ajax({
url:“/testajax”，
类型：“POST”，
数据：{test:“test”}，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
超时：60000，
成功：功能（模型）{
美元（“#globalBusy”）.fadeToggle（400，“线性”）；
$（“#状态”）.text（“成功…”）；
}
});
});

谢谢，问题是我给出的代码片段是从按钮的单击事件调用的，因此它不能真正进入文档就绪功能。但是整个DOM都应该加载，因为页面已经完全下载了。我能告诉你的是，你描述的场景似乎是第一个fadeToggle不起作用（在ajax调用之前），但是ajax调用中的fadeToggle确实起作用。上面的例子每次都有效。您必须查看更多代码才能进一步评论。