jquery - 为什么我的图标在图像上的 "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;
    });
});

当我在 firebug 中单步执行代码时，它工作正常，但是当我运行它时，我的电子邮件客户端会弹出(在我的情况下为 Outlook)，但图像仍然是 ajax 加载器。 。即使这条线已经运行:

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() 的 native jQuery 回调中更改文档位置的位置。