在鼠标单击时启动动画gif，从第一帧开始

Question

我在循环动画中的错误点处开始出现gif问题。

我创建了一个动画，其中气泡在屏幕上升起然后淡出。气泡图形在创建时只是png。

然而，如果点击它们，我想要显示泡泡弹出的GIF动画。这是我的gif：

http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.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('<img src="http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif" />');
        ...
});

...它不是在第一帧开始gif。我只能假设从gif加载的那一刻起，它开始'播放'，所以当它插入div时，它会在gif的几秒循环中以任何方式加载它。

尝试点击我示例中的许多气泡，您会发现它无法正常工作。它应该从圆形气泡开始，然后变成一个大的“爆炸”图形，然后几个小气泡就会逐渐消失。您会注意到它在gif期间的任何时刻开始。

http://codepen.io/anon/pen/EjQgoV

有什么想法吗？

Answer 1

你能试试吗？

http://codepen.io/anon/pen/QbQGbe

我为每个弹出的气泡缓存了不同的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);
  });