像這樣的加載程序與jQuery

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; 
}); 

但三個步驟之間我看到一個醜陋的「白圖像」。爲什麼？

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

哦yessss，這是一個很好的問題:)

所以基本上它與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，而是禁止輸入）在this prototype我建立。點擊動畫圈並嘗試提交評論。您會注意到，在您按下回車鍵之後，註釋輸入框將被禁用，直到註釋重新顯示在屏幕上！

在你的情況，你的代碼看起來像

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