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

但这并没有什么不同。在功能执行完毕之前，图像不会改变。

你会注意到我将async设置为false，并且由于各种原因我这样做。但即使没有这个，问题仍然存在。我也尝试过按照建议使用setTimeOut（），这似乎不起作用（而且我知道setTimeOut（）用于异步模式，但即使在异步中它似乎没有帮助。）< / p>

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 utilizarlafunciónSeendde esta manera：

$.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 te sirva，saludos

jQuery在执行函数时更改图像以显示进度

2 个答案: