Как я могу применить анимацию загрузки GIF к моему автозаполнению?

Question

Мне так повезло, что мое решение размещено на американском сервере, а моя аудитория находится в Скандинавии (по другую сторону пруда).

Это делает время отклика немного медленным и не идеальным, когда я использую Автозаполнение для своего окна поиска.

Чтобы дать пользователю некоторую обратную связь, я хочу отобразить анимированный GIF загрузки.

Проблема в том, что я не знаю, как его инициировать перед обратным вызовом. Анимация должна начинаться, когда автозаполнение выполняет поиск в БД, и прекращаться, когда поиск в БД завершается.

Мой JavaScript выглядит примерно так:

jQuery(document).ready(function() {
    var options = autosuggestOptions();
    var response = new bsn.AutoSuggest('mySearchBox', options);
});

  function autosuggestOptions()
  {
    var options = {
        script:"wp-content/themes/test/include/someFile.php?",
        varname:"input", minchars: 2, delay: 200, json:true, maxresults:15, timeout: 5000,
          callback: function (obj) { (.. do stuff here ..) }
    };
    return options;  
  } 

Мой анимированный GIF внутри <div class="loader"></div>.

Предложения кого-нибудь?

Answer 1

Непосредственно в пределах autosuggestOptions(), показать div.Затем скройте его в обратном вызове.

function autosuggestOptions() {
  // Show the loader
  $(".loader").fadeIn();
  var options = {
    callback: function(obj) {
      /* Safe to hide the loader */
      $(".loader").fadeOut();
    }
  };
}