Javascript 鼠标单击开始动画gif，从第一帧开始

在循环动画中，gif从错误的点开始时出现问题

我制作了一个动画，其中气泡在屏幕上升起，然后消失。气泡图形在创建时只是一个

png

但是，如果单击它们，我希望显示气泡弹出的动画gif。这是我的gif：

为了防止gif加载到div时出现“跳转”，我正在预加载它：

(new Image()).src = "http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif";

然而，我发现当我点击并将新的gif放入div中时

 $('body').on('click', '.db-bubble', function() {
        ...
        $(this).html('[![][1]][1]');
        ...
});

。。。它不是在第一帧开始gif。我只能假设，从加载gif的那一刻起，它就开始“播放”，因此，当它插入到div中时，它会在gif的几秒钟周期内的任何时候以某种方式加载它

试着点击我的例子中的许多气泡，你会发现它不能正常工作。它应该从圆形气泡开始，然后变成一个大的“爆炸”图形，然后几个小气泡应该消失。您将注意到它在gif过程中的任意点开始

有什么想法吗？

你能试试这个吗

我正在为每个弹出的气泡缓存不同的src：

    setInterval(function makeBubble() {
          (new Image()).src = "http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif?db-bubble-"+bubbleID;
....

稍后在用于弹出气泡的函数中，必须设置为此气泡缓存的src（由其bubbleID标识）：

---

预加载有什么变化吗？不管有没有，似乎都一样。。。顺便说一下，我正在检查你的主要问题

$('body').on('click', '.db-bubble', function() {
    var bubbleID = $(this).attr('id');
    src = 'http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif?'+bubbleID;
    var img = new Image();
    img.src=src;
    $(this).html(img);
    setTimeout(function() {
      // murder time
      $("#" + bubbleID).remove();
    }, 1000);
  });