如何将加载 gif 动画应用到我的自动建议中？

发布于 2024-08-19 11:21:01 字数 927 浏览 9 评论 0原文

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

这使得响应时间有点慢，并且当我使用 AutoComplete 我的搜索框。

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

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

我的 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 位于

内。

有人建议吗？

原文

I'm so lucky to have my solution on an US server, while my audience is located in Scandinavia (on the other side of the pond).

This makes the respons time a bit slow, and not ideal when I'm using AutoComplete for my search box.

To give the user some feedback, I want to display a animated loading GIF.

The problem is that I don't know how to initiate it before callback.
The aniamtion should start when AutoComplete searches the DB, and stop when DB search is finished.

My javascript looks something like this:

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;  
  }

My animated gif is inside <div class="loader"></div>.

Suggestions anyone?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁〃客ぐ 2024-08-26 11:21:01

立即在 autosuggestOptions() 中显示 div。然后将其隐藏在回调中。

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

Immediately within autosuggestOptions(), show the div. Then hide it within the callback.

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

回复收藏 0 原文

~没有更多了~