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()。

中更改本机jQuery回调中的文档位置

Answer 2

$('#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'事件进行跟踪。

Answer 3

我没有对此进行测试，但您可以在图片上尝试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);
    });
});

为什么我的图标在图像上的“src”属性后没有变化？

3 个答案: