在鼠标单击时启动动画 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('[![][1]][1]');
        ...
});

... 它不是在第一帧开始 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);
  });