jQuery Image Animation (combining PNG into timeline)

Question

With much frustration I managed to get my code nearly working. I want to animate a list of transparent png images. Making it look and work like a GIF.

I have 36 images.

1.png
2.png
3.png
..
36.png

However for someone reason my code crashes at the "5.png" - I have added the code and made it 1500ms so you can see the Firebug or what happens. The image exists.

jquery

// M2M Badge
$(function () {
    var i = 1;
    var interval = setInterval(function () {
        $('div.m2m_badge a img').attr({
            src: '//gc-cdn.com/ui/m2m/m/' + i + '.png'
        });
        i++;
        if (i === 36) i = 1; //38 images has been shown, stop the interval
    }, 1500); //50ms between each swap
});

jsfiddle

http://jsfiddle.net/VWyn9/8/

It's working fine for me on Chrome, what browser are you using? — Nelson, Nov 06 '12 at 10:09
Firefox and Internet Explorer aka He Who Must Not Be Named (shudders) — TheBlackBenzKid, Nov 06 '12 at 10:10
I remember answering this :-) : http://stackoverflow.com/questions/12599648/jquery-combine-a-selection-of-pngs-to-one-image-timeline-animation Works for me in latest firefox — Johan, Nov 06 '12 at 10:12

score 3 · Accepted Answer · answered Nov 06 '12 at 10:16

Your code works, but may I recommend not using 36 images as it will probably load slowly.

a good alternative will have a sprite file (one file with all of these images in a row). you can then set it as a background image for a div, and change the background position in each iteration to only show one frame of the animation.

this way you will only load one image (which will be 18 times faster than loading 36 images) and it will definitely work on every single environment.

Fantastic suggestion. Any chance of creating some code or sample with the background position? This is brilliant idea. — TheBlackBenzKid, Nov 06 '12 at 11:25

jQuery Image Animation (combining PNG into timeline)

jquery

jsfiddle

1 Answers1