Почему моя иконка не меняется после атрибута "src" на изображении?

Question

У меня есть следующий код, когда я нажимаю на изображение, где идентификатор "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, он работает нормально, но когда я его запускаю, мой почтовый клиент выскакивает (внешний вид в моем случае), но изображение все еще является загрузчиком 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;
        });
    });
});

Где вы меняете расположение документов в нативном обратном вызове jQuery в show(),

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);
    });
});