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/

Answer 1

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.