通過ajax替換一個圖像與另一個圖像使它瞬間消失

Question

我有以下代碼（asp.net-mvc，jquery）（我簡化了示例以顯示問題），我想單擊一個圖像並將其替換爲另一張圖像。

這工作正常，但我第一次點擊它，原始圖像消失（一瞬間）之前，其他圖像顯示。之後，它可以無縫工作。

有沒有什麼辦法可以消除這個怪癖，所以不會在沒有圖像顯示的情況下進行分割？

這裏是我的控制器代碼：

public ActionResult UpdateFavoriteExercise(int id, string toggle) 
    { 
     if (toggle == "off") 
     { 
      return Content("<img toggle='off' src='/images/vote-favorite-off1.png' border=0'>"); 
     } 
     return Content("<img toggle='on' src='/images/vote-favorite-on1.png' border=0'>"); 
    } 

這裏是我的jQuery代碼：

$('div.favoriteExercise').live('click', function() { 

    var id = $(this).attr("id"); 

    var toggle = $(this).attr("toggle"); 
    if (toggle == 'off') { 
     onOff = 'on'; 
    } 
    else { 
     onOff = 'off'; 
    } 

    var url = '/Tracker/UpdateFavoriteExercise/' + id + '?toggle=' + onOff; 

    $(this).load(url); 
    $(this).attr("toggle", onOff); 
}); 

Answer 1

你可以嘗試預加載新的圖像with javascript，without javascript或with css。

另一種選擇是使用sprites即ensure圖像已經加載。

這些都只是一些技巧，你可以嘗試，有很多更多，如果你做一些谷歌搜索:)

事實上，我建議使用一個單獨的元素一個精靈，然後使用background-position在CSS中切換焦點。這樣，您只需從元素中添加/刪除單個類，而無需添加/刪除新元素並執行所有測試邏輯。