爲什麼我的圖標在圖像上的「src」屬性後沒有改變？

Question

我有以下的代碼時，我的圖像，其中ID爲「mailToTechOwner」

$('#mailToTechOwner').live('click', function (e) { 
    e.preventDefault(); 

    var origSource = $(this).attr("src"); 
    var objDiv = $(this); 

     //change image to ajax loader 
    objDiv.attr("src", "/Content/Images/ajax-loader.gif"); 

    $.get("/Project/MailMessage/" + projectId, function (data) { 

     //change image back to original 
     objDiv.attr("src", origSource); 
     window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name; 
    }); 
}); 

當我通過代碼中的螢火蟲，它工作正常，但是當我運行它，我的電子郵件客戶端彈出（步上點擊前景在我的情況），但形象仍然是阿賈克斯裝載機。 。即使這條線已經運行：

objDiv.attr("src", origSource); 

是否有反正直到圖像更改完成後才彈出電子郵件？是否將src屬性更改爲異步操作？是否有一些回調，以確保其在運行其他代碼之前完成？

Answer 1

而不是取代圖像源，嘗試在HTML中有兩個圖像，只是初步隱藏加載器。

在GET請求中，只需隱藏原始圖像並顯示加載程序，並在完成時重做它。你也可以這樣做：

$(document).on('click', '#mailToTechOwner', function(e) { 
    e.preventDefault(); 
    var loader = $('<img src="/Content/Images/ajax-loader.gif" />'), 
     img = $(this) 

    img.hide().after(loader); 

    $.get("/Project/MailMessage/" + projectId, function (data) { 
     loader.remove(); 
     img.show(1, function() { 
      window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name; 
     }); 
    }); 
}); 

如果您在show()更改本地jQuery的回調文件的位置。

Answer 2

我還沒有測試過這個，但是你可能會在圖像上嘗試load事件。

$('#mailToTechOwner').live('click', function (e) { 
    e.preventDefault(); 

    var origSource = $(this).attr("src"); 
    var objDiv = $(this); 

    //change image to ajax loader 
    objDiv.attr("src", "/Content/Images/ajax-loader.gif"); 

    $.get("/Project/MailMessage/" + projectId, function (data) { 

     objDiv.load(function() { 
      window.location = 'mailto:' + data.Email+ '?subject=Alert'; 
     }); 

     //change image back to original 
     objDiv.attr("src", origSource); 
    }); 
}); 

Answer 3

$('#mailToTechOwner').on('click', function (e) { 
    var objDiv = $(this); 
    var origSource = objDiv.attr("src"); 

     //change image to ajax loader 
    objDiv.attr("src", "/Content/Images/ajax-loader.gif"); 
    $.get("/Project/MailMessage/" + projectId, function (data) { 
     //change image back to original 
     objDiv 
      .load(function(){ 
       console.log('image load triggered',$(this).attr("src")); 
       setTimeout(function(){//give some time to see what happens 
        window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name; 
        $(this).unbind('load'); 
        },1000); 
       }) 
      .attr("src", origSource); 
    }); 

    return false;//prevent default + stop propogation 
}); 

正如你說，這是工作，而在Firebug跟蹤，其原因可能是因爲圖像加載的window.location的就被觸發和瀏覽器迴流之前。

而你最初的問題是，改變圖像源是異步的，不保證立即加載圖像。更改任何外部鏈接（）是異步的，可以通過'load'事件進行跟蹤。