jquery - 如何将加载 gif 动画应用于我的自动建议？

Question

我很幸运能将我的解决方案放在美国服务器上，而我的观众位于斯堪的纳维亚半岛（在池塘的另一边）。

这使得响应时间有点慢，当我将自动完成用于我的搜索框时并不理想。

为了给用户一些反馈，我想显示一个动画加载 GIF。

问题是我不知道如何在回调之前启动它。动画应该在 AutoComplete 搜索 DB 时开始，并在 DB 搜索完成时停止。

我的 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();
    }
  };
}