网站 gif 延迟/重叠

Question

问题标题可能不太好，但我真的不知道如何描述它，所以在这里：

我有 N 个带有文本 (text1, text2, text3...) 的 <td> 元素，当您将鼠标悬停在每个元素上时，会出现一个弹出窗口，并播放相应的 gif (gif1、gif2、gif3...）。当你的鼠标离开<td> 时，gif 就会消失。 我的问题是这样的：

1. 将鼠标悬停在文本 1---> 出现弹出窗口，同时播放 gif1 [正确]
2. Leave text1----------->弹窗消失[正确]
3. 将鼠标悬停在 text2----> 出现弹出窗口，其中 gif1 播放了一会儿（0.5 秒到 1 秒），然后 gif2 播放 [不正确]
4. Leave text2----------->弹窗消失[正确]
5. 将鼠标悬停在 text3----> 出现弹出窗口，其中 gif2 播放了一会儿（0.5 秒到 1 秒），然后 gif3 播放 [不正确]

然后继续 (video example)。

那么我怎样才能让它在每次播放新的 gif 时都不显示以前的 gif？

---

HTML

弹窗基本上是<div>：

<div class="popup">
 <img class="myPopup">
</div>

JS

<td> 有一个mouseenter 和一个mouseleave 事件，分别触发函数pop_in 和pop_out。

var popup_here

function pop_in(e){
    var row_num=.....//getting the coordinates
    var ex_num=.....//getting the coordinates

    popup_here=document.getElementsByClassName("myPopup")[0];
    popup_here.src=....//setting the source to the correct gif from a list of objects using the row_num and ex_num variables

    popup_here.style.visibility="visible";
}

function pop_out(e){
    popup_here.style.visibility="hidden";
}

CSS

除了淡入之外没有花哨的 CSS。但无论如何，我已经尝试完全删除它，但没有任何改变。

Answer 1

您的问题是任何新的 gif 都需要时间来加载，并且在此期间会显示以前的源。

最简单的解决方案是将src 属性设置为pop_out 函数中的某个占位符。