Загрузка изображения GIF во время работы jQuery ajax

Question

Я пытаюсь показать загрузочное изображение во время выполнения моего вызова ajax, однако использование атрибута beforeSend не меняет мою область результатов.

$.ajax({
  url: "/answer_checker.php",
  global: false, type: "POST", 
  data: ({...clipped...}), 
  cache: false,
  beforeSend: function() {
    $('#response').text('Loading...');
  },
  success: function(html) {
    $('#response').html(html);
  }
}

Заранее спасибо.

Answer 1

У меня была похожая проблема.Чтобы решить мою проблему, я заменил .text в разделе beforeSend на .html и создал html-тег для вставки в элемент, содержащий мой статус.Функция успеха не заменила контент, созданный функцией .text (), но заменил контент, созданный функцией .html ().

$.ajax({
  url: "/answer_checker.php",
  global: false, type: "POST", 
  data: ({...clipped...}), 
  cache: false,
  beforeSend: function() {
    $('#response').html("<img src='/images/loading.gif' />");
  },
  success: function(html) {
    $('#response').html(html);
  }
}

Answer 2

У меня есть решение, возможно, это не лучший способ сделать это, но оно сработало в этом случае.

$('input').keyup(function () {

  $('#response').text('loading...');

  $.ajax({
    url: "/answer_checker.php",
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false,
    success: function(html) {
      $('#response').html(html);
    }
  });
});

Устанавливая резонансное содержимое перед вызовом функции ajax, он продолжает отображать загрузочный текст, пока вызов ajax не обновит тот же контент.

Спасибо всем, кто нашел время, чтобы ответить.

Alan

Answer 3

Вы пропустили запятую после cache: false

Answer 4

Вы также можете использовать следующее:

$('#tblLoading').ajaxStart(function() { $(this).show(); });
$('#tblLoading').ajaxComplete(function() { $(this).hide(); });