网站 gif 延迟/重叠

Posted 2023-03-25

【中文标题】网站 gif 延迟/重叠

【英文标题】：Site gif delay/overlap

【发布时间】：2021-05-27 19:48:51

【问题描述】：

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

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

将鼠标悬停在文本 1---> 出现弹出窗口，同时播放 gif1 [正确] Leave text1----------->弹窗消失[正确] 将鼠标悬停在 text2----> 出现弹出窗口，其中 gif1 播放了一会儿（0.5 秒到 1 秒），然后 gif2 播放 [不正确] Leave text2----------->弹窗消失[正确] 将鼠标悬停在 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。但无论如何，我已经尝试完全删除它，但没有任何改变。

【参考方案1】：

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

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

【讨论】：

现在我感觉很糟糕。我有点猜到这可能是问题所在，这就是为什么我还尝试在pop_out 函数的末尾做一个popup_here=null。但它什么也没做。现在我尝试了popup_here.src=null;，它确实有效。我认为只有popup_here=null 就足够了，所以直到现在我什至没有尝试过.src。感谢您的帮助