2

当我单击 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 属性是异步操作吗？在运行其他代码之前是否有一些回调来确保其完成？

4

3 回答 3

2

不要替换图像源，而是尝试在 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().

于 2012-07-22T01:01:50.043 回答
1 
$('#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 在图像加载后和浏览器重排之前被触发。

您最初的问题是，是的，更改图像源是异步的，无法保证立即加载图像。更改任何外部链接（）都是异步的，可以通过“加载”事件进行跟踪。

于 2012-07-22T00:46:19.030 回答
0

我尚未对此进行测试，但您可以尝试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);
    });
});
于 2012-07-21T23:55:45.607 回答