jQuery изменение изображения во время выполнения функции для отображения прогресса

Question

Я знаю, что в некоторых браузерах (IE, Chrome), которые изменяются в DOM, не будет выполняться до тех пор, пока функция не будет завершена. Я прочитал различные предложения о том, как с этим бороться, но мне не повезло. Я пытаюсь выполнить цикл вызовов AJAX и показать прогресс для каждой обрабатываемой строки. Код выглядит так:

for(i=0; i < rowIds.length; i++){ 

    $(rowImage).attr('src', '/images/spinner.gif'); 

     $.ajax({ 
        type: 'GET', 
        url: ajaxUrl, 
        async: false, 
        processData: true, 
        data: {}, 
        dataType: "json", 
        success: function(data) { 
         $(rowImage).attr('src', '/images/success.gif'); 
        } 
       }); 
} 

Я прочитал несколько предложений о попытке убедиться, что преобразование изображения происходит перед началом работы, например, сделать это до начала вызова AJAX:

var changeImage = function() { 
    $(rowImage).attr('src', '/images/spinner.gif'); 
}; 

$.when(changeImage()).done(function() { 
      //run AJAX call 

Но это не имеет значения. Изображения не меняются до тех пор, пока функция не будет выполнена.

Вы заметите, что у меня установлено асинхронное значение false, и я делаю это по разным причинам. Но даже без этого проблема сохраняется. Я также пытался использовать setTimeOut(), как было предложено, и это не работает (и я знаю, что setTimeOut() предназначен для асинхронного режима, но даже в async он, похоже, не помогает.)

Answer 1

Jquery:

$.ajax({ 
     type: 'GET', 
     url: ajaxUrl, 
     async: false, 
     processData: true, 
     data: {}, 
     dataType: "json", 
     success: function(data) { 
      $(rowImage).attr('src', '/images/success.gif'); 
     } 
}); 

$(document).ajaxStart(function() { 
     $(rowImage).attr('src', '/images/spinner.gif'); 
    }).ajaxStop(function() { 

}); 

Answer 2

Estimado:

Puedes intentar utilizar ла несильно beforeSend де Esta Маньера:

$.ajax({ 
       type: 'GET', 
       url: ajaxUrl, 
       async: false, 
       processData: true, 
       data: {}, 
       dataType: "json", 
       beforeSend: function(data){ 
        $(rowImage).attr('src', '/images/spinner.gif'); 
       }, 
       success: function(data) { 
        $(rowImage).attr('src', '/images/success.gif'); 
       } 
      }); 

Espero тэ SIRVA, Saludos