Загрузчик, как это с JQuery

Question

Пожалуйста, можете ли вы оформить заказ http://svpply.com, переместите указатель на изображение и нажмите +, когда оно появится. Если вы осторожны, вы можете увидеть очень хороший загрузчик, когда вы нажали +, и через некоторое время появится v.

Как я могу реализовать что-то подобное? В этом процессе нет «белого обзора» между тремя шагами (+, загрузка, 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;
});

Но между тремя ступенями я вижу уродливое "белое изображение". Почему?

UPDATE

Теперь у меня есть:

$(".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.

UPDATE

<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,и как клиент взаимодействует с сервером.Как только вы поймете это, вы сможете сделать много крутых вещей, как это!Удачи.

РЕДАКТИРОВАТЬ

Вы можете проверить рабочий пример этого (который не использует загрузочный GIF, но вместо этого отключает ввод) в этот прототип I 'м здание.Нажмите на кружок анимации и попробуйте оставить комментарий.Вы заметите, что после нажатия кнопки ввода поле ввода комментария будет отключено до тех пор, пока комментарий не будет отображен на вашем экране!

В вашем случае ваш код будет выглядеть как

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