jQuery图像动画（将PNG组合到时间轴中）

Question

我非常沮丧地设法让我的代码几乎工作。我想为透明png图像列表设置动画。让它看起来像GIF一样工作。

我有36张图片。

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

然而，由于某些原因，我的代码在“5.png”崩溃 - 我已经添加了代码并使其达到了1500毫秒，因此您可以看到Firebug或发生了什么。图像存在。

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

您的代码有效，但我建议您不要使用36张图片，因为它可能会加载缓慢。

一个好的替代方案将有一个精灵文件（一个文件包含所有这些图像）。 然后，您可以将其设置为div的背景图像，并将每次迭代中的背景位置更改为仅显示动画的一帧。

这样你就只能加载一张图像（比加载36张图像快18倍），它肯定适用于每一个环境。