为什么我的图标在图像上的“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'事件进行跟踪。