Question

请检查http://svpply.com，将指针移到图像上，然后点击+。如果你小心点击+，你可以看到一个非常漂亮的装载机，并在一段时间后出现v。

我该如何实现这样的东西？在此过程中，三个步骤（+，loading，v）之间没有“白色视图”。想法？

其实我有这段代码：

$(".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，而是禁用输入）。点击动画圈并尝试提交评论。您会注意到，在您按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");
    }
});

用jQuery加载这样的东西

1 个答案: