jQuery 工具提示显示加载 gif 而 ajax 获取数据

【问题标题】：jQuery tooltip show loading gif while ajax gets datajQuery 工具提示显示加载 gif 而 ajax 获取数据
【发布时间】：2017-11-29 15:54:37
【问题描述】：

我有一个项目列表，如果需要，用户可以触发工具提示。我试图在执行 ajax 调用以在工具提示窗口中获取适当的数据时显示加载 gif。

我怎样才能做到这一点？

$(document).tooltip({
  items:'.tooltip',
  tooltipClass:'toolTipDetails',
  position: { my: "left+5 top", at: "right center" }
  content:function(callback) {
      var id = $(this).attr('id');

      $.get('tickets/tooltips.php', {
        id:id
      }, function(data) {
        callback(data); 
    });
},

【问题讨论】：

在发出 AJAX 请求之前显示图像，并在完成时再次隐藏。

标签： jquery ajax jquery-ui-tooltip

【解决方案1】：

将图像加载器（默认隐藏）添加到您的页面，例如：

<img src="loader.gif" id="loader" style="display:none"/>

然后你可以使用 jQuery 函数 show()/hide() 来调整它，比如：

$(document).tooltip({
  items:'.tooltip',
  tooltipClass:'toolTipDetails',
  position: { my: "left+5 top", at: "right center" }
  content:function(callback) {
      var id = $(this).attr('id');

      $('#loader').show(); // <------ Show loader

      $.get('tickets/tooltips.php', {
        id:id
      }, function(data) {
        $('#loader').hide(); // <------ Hide loader
        callback(data); 
    });
},

【讨论】：