利用tooltip实现图片显示

Question

我在这个a标签中利用onmouseover 绑定时间，然后通过ajax发请求获得对应的图片，再修改tooltip上的content，实现鼠标移入显示图片
但是会出现一个问题，刚打开页面就是需要移入两次才可以显示图片，后边再移入就没有问题了
想问问有没有遇到同样问题的小伙伴，是怎么解决的？

<a id="111"flow="right" class="priviewImg" onmouseover="displayImg(this)">
function displayImg(obj) {
  //$('priviewImg').attr('tooltip','hhhh')
  var id = obj.getAttribute('id');//获取属性
  //var v1 = $(obj).attr('tooltip')
  console.log(id)  //拿到该标签
  $.ajax({
    url: '/api/faceguard/employees/' + id,
    type: 'GET',
    dataType: 'json',
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Difg-Header-BizCode', localStorage.getItem('Biz_Code'))
    },
    success: function (data) {
      console.log(data)
      if (data.code === 0) {
        var pri_img = data.result.image;
        //debugger
        var str = '<img width="150px" src="data:image/jpg;base64,' + pri_img + '">'
        $(obj).popover({
          trigger: 'hover',
          html: true,
          content: str
        })
      } else {
        $(obj).popover({
          trigger: 'hover',
          html: true,
          content: "未找到.."
        })
      }
    }
  })
}

Answer 1

因为图片下载需要时间，第二次移上去已经下好了，所以很快显示。
tooltip 的 content 可以先显示 loading 动画，img 加上 onload，加载好后再替换成 img