Question

我想在jquery中添加一个在ajax请求的开头和结尾之间可见的加载图像。

目前，当我点击我想要用加载图像替换的按钮时，会调用此函数：

function test(num)
{
             $("div.bd_img").attr("style", "display:none");
             $("div.ajax_load").attr("style", "display:block");
             str = "ajax?id=" + num.toString();

             $.ajax({
                type: "GET",
                url: str,
                dataType: "xml",
                success: test2
             });
             $("div.bd_img").attr("style", "display:block");
             $("div.ajax_load").attr("style", "display:none");

}

但它似乎没有起作用。

两个分区bd_img和ajax_load是div的子代，因此当display设置为none时，应该用另一个替换，反之亦然。

Answer 1

在回调函数中禁用加载器（在您的情况下为test2）

根据定义，

Ajax次调用是异步的。您当前的代码将触发ajax GET，然后直接启用以禁用您的加载程序。如果你在ajax调用的回调中禁用加载器，你应该会看到你期望的行为。

Answer 2

检查你的test2方法。我还会将您的图像切换移动到您的成功回调中。

success: function() {
    $("div.bd_img").show();
    $("div.ajax_load").hide();

    test2();
}

检查以确保你的div实际上有类bd_img和ajax_load，并且该类不在实际图像上。现在你说你的div有'.bd_img'或'.ajax_load'类。如果它是div中带有类的图像，那么你想要......

$("div .bd_img").show();
$("div .ajax_load").hide();

Answer 3

您应该切换回test2内的图片。 Ajax调用区域异步，因此$.ajax(...)立即返回，而不是在请求完成时返回。

有没有想过ajax的A代表什么？： - ）

Answer 4

我会使用ajaxStart and ajaxStop这将使其适用于整个应用程序，将代码保存在一个地方，易于修改等。

在ajax请求的开始和结束之间“加载图像”

4 个答案: