Question

我要获取一些相当昂贵的数据来获取网页上许多html“ title”属性的内容，因此我只想在用户请求时（出于明显的原因，悬停）才为该属性加载数据。我可以在悬停时将title属性设置为正常，但显示不正确。具体来说，我必须在异步调用结束后将鼠标指针至少移动一个像素，然后再显示文本。我希望文本在异步调用结束后立即显示（或至少在异步调用结束前在通常的悬停文本延迟之后显示）

$('body').on('mouseenter', '.thumbnail', function(){
    var self = $(this);

    setTimeout(function(){
        var titleStr = "yay, a new title";

        self.attr('title', titleStr)
      $('#status').text("title set!")
    }, 1000)    

});

（我在这个新问题“向导”上找不到可运行的代码按钮，所以这是一个jsfiddle：https://jsfiddle.net/76dk3snz/）

我也尝试过运行其他事件，例如.trigger（'mousemove'）或mouseleave和mouseenter等，但似乎没有任何事情触发期望的行为。

（也就是说，我希望文本显示出来而无需用户再次移动鼠标）

Answer 1

在Chrome中，您可以设置元素之前的标题，以调用昂贵的操作，然后加载文本将显示为工具提示，并在响应出现时替换为真实标题后退：

$('body').on('mouseenter', '.thumbnail', function() {
  var self = $(this);
  self.attr('title', 'Loading...')
  setTimeout(function() {
    var titleStr = "yay, a new title";
    self.prop('title', titleStr)
    $('#status').text("title set!")
  }, 1000)


});

.thumbnail {
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbnail">

</div>

<div id="status">

</div>

不幸的是，似乎没有一种方法可以强制刷新Firefox中的title，该机制是浏览器内部的，仅受用户启动的mose事件影响。

在悬停/异步时更新HTML标题属性

1 个答案: