jquery - 像这样的 jQuery 加载器

Question

请问您可以结账吗http://svpply.com ，将指针移到图像上，然后在图像出现时单击 +。如果你细心的话，当你点击+时，你会看到一个非常漂亮的加载器，过了一会儿就会出现一个v。

我怎样才能实现这样的事情？在此过程中，三个步骤(+、加载、v)之间没有“白色 View ”。有想法吗？

实际上我有这段代码:

$(".add_button").live("click", function() {
    var element = $(this),
        data = "id=" + this.id;

    element.css("background-image", "url(/media/images/loader.gif)")

    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: data,
        success: function(result) {
            element.css("background-image", "")
            element.removeClass("add_button").addClass("del_button");
        }
    });

    return false;
});

但是在这三个步骤之间我看到了一个丑陋的“白色图像”。为什么？

更新

现在我已经:

$(".add_button").live("click", function() {
    var element = $(this),
        data = "id=" + this.id;

    element.removeClass("add_button").addClass("spinner");

    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: data,
        success: function(result) {
            element.removeClass("spinner").addClass("del_button");
        }
    });

    return false;
});

但是还是同样的问题。不幸的是我在 svpply 源代码中找不到感兴趣的源代码。

更新

<div class="add_button" id="id"></div>

Answer 1

哦，是的，这是个好问题:)

所以基本上它与 AJAX 有关。以及不同类型的设置!您需要使用 ajax:beforeSend 和 ajax:success (或 ajax:complete 如果您在 success< 后执行更多加载操作)。这意味着您可以执行类似的操作(假设您的按钮包含在表单中)

$(".add_button").parent("form").bind("ajax:beforeSend",function(e,data,status,xhr) {
        $("#someDiv").append("<img id='loading' src='url/to/loading/gif'></img>");
        // and any other things you want to do like removing the button or disabling it
});

该函数将在客户端(您的计算机)向服务器发送请求之前执行。您还可以在其中添加很多内容并修改选项以请求您实际发送到服务器!

然后你就可以拥有

$(".add_button").parent("form").bind("ajax:success",function(data,textStatus,jqXHR) {
        $("#loading").remove();
        // and any other things like adding your del button
});

在服务器将对象发送回客户端供您使用后调用，在这种情况下您可以删除您的#loading img并执行其他很酷的事情!

我强烈建议您阅读该链接并完全理解 AJAX 的工作原理以及客户端如何与服务器交互。一旦你明白了这一点，你就可以做很多像这样很酷的事情!祝你好运。

编辑

您可以在 this prototype 查看此示例(不使用加载 gif，而是禁用输入)。我正在 build 。单击动画圈并尝试提交评论。您会注意到，按 Enter 后，评论输入框将被禁用，直到评论重新呈现在屏幕上!

就您而言，您的代码如下所示

$.ajax({
    type: "POST",
    url: "/product/add/",
    data: data,
    beforeSend: function(msg) {
        // do the stuff you want to do
    },
    success: function(result) {
        element.removeClass("spinner").addClass("del_button");
    }
});