Site gif delay/overlap

Question

The question title may not be very good but I don't really know how to describe it so here it goes:

I have N <td> elements with text (text1, text2, text3...) that when you hover over each of them a pop-up appears with the respective gif playing (gif1, gif2, gif3...). And when your mouse leaves the <td> the gif disappears. My problem is this:

1. Hover over text 1---> pop-up appears with gif1 playing [correct]
2. Leave text1-----------> pop-up disappears [correct]
3. Hover over text2----> pop-up appears with gif1 playing for a bit (0.5sec-1sec) and then gif2 plays [incorrect]
4. Leave text2-----------> pop-up disappears [correct]
5. Hover over text3----> pop-up appears with gif2 playing for a bit (0.5sec-1sec) and then gif3 plays [incorrect]

And on and on (video example).

So how can I make it to not show the previous gif every-time the new one is supposed to play?

---

HTML

The pop-up is basically a <div>:

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

JS

the <td> have a mouseenter and a mouseleave event that trigger the functions pop_in and pop_out respectively.

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

No fancy CSS besides the fade-in. But anyway, I've tried removing it altogether and nothing changed.

Answer 1

Your problem is that any new gif needs time to load and in that time the previous source is displayed.

The easiest solution is to set your src attribute to some placeholder in your pop_out function.