CODEWITHSUNDEEP
javascriptgifanimated-gif
Francesca
Francesca

Reputation: 28138

Starting animated gif on mouse click, start at first frame

I'm having problems with a gif starting at the incorrect point in the looping animation.

I have created an animation where bubbles rise up the screen and then fade out. The bubble graphic is just a png when they are created.

However, if they are clicked, I want to show an animated gif of the bubble popping. This is the gif I have:

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

In order to stop there being a 'jump' when the gif is loaded into the div, I'm preloading it:

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

However what I'm finding is that when I click and place the new gif inside the div as such...

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

... it starts the gif not at the first frame. I can only presume that from the moment the gif is loaded, it starts 'playing' so when it's inserted into the div it somehow loads it in at any point during the few-second cycle of the gif.

Try clicking on many bubbles in my example and you will notice that it doesn't work correctly. It should start with the round bubble, then change to a large 'exploded' graphic and then several little bubbles should fade away. You will notice it starts at any point during the gif.

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

Any ideas?

Upvotes: 2

Views: 1453

Answers (1)

nowhere
nowhere

Reputation: 1548

Can you try this?

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

I'm caching a different src for each popping bubble:

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

Later in the function you use to pop the bubble, you must set the src that was cached for this bubble (identified by its 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);
  });

Upvotes: 1

Related Questions