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

Question

我在循环动画中从不正确的点开始的 gif 有问题。

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

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

http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif

为了在 gif 加载到 div 时停止出现 'jump'，我正在预加载它：

(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 的那一刻起，它就开始了 'playing'，所以当它被插入 div 时，它会以某种方式在 gif 的几秒周期内的任何时候加载它。

尝试点击我示例中的许多气泡，您会发现它无法正常工作。它应该从圆形气泡开始，然后变成一个大的 'exploded' 图形，然后几个小气泡应该逐渐消失。您会注意到它在 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);
  });

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

Starting animated gif on mouse click, start at first frame

javascript

gif

animated-gif

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