Javascript 通过更改div的背景图像制作动画

我们试图通过一系列图像改变div元素的背景并重复这个循环来模拟动画。共有四个533x800 8位PNG图像，每个图像大小约为110KB。JavaScript函数通过

setInterval

运行，每300毫秒将div背景更改为下一个图像。我原以为这对浏览器来说不会是一项繁重的任务，但结果是存在太多的延迟。尤其是在移动设备上。你会建议什么更好的方法来实现这一点？ 下面是用于更改背景的JS（jquery）函数。谢谢

function changeBackground() {
    if ( typeof changeBackground.counter == 'undefined' ) {
        changeBackground.counter = 1;
        changeBackground.backObject = $('#body');
    }

    if ( changeBackground.counter == 5 )
        changeBackground.counter = 1;

    changeBackground.backObject.css( 'background-image', "url(graphics/" + changeBackground.counter + ".png)" );
    ++changeBackground.counter;
}

---

通过将所有四个图像相邻放置，创建一个大型复合背景图像。然后每300毫秒加载背景并更改其位置（因此它会显示四个“帧”中的一个），而不是像我所建议的那样每次加载一个新的背景

你应该把这些图像制作成动画GIF。这将导致只加载一个图像，并且不需要javascript（这意味着它也可以在禁用javascript的情况下工作）

关于透明度，GIF支持它，但仅以布尔方式（像素是100%透明还是不透明，而PNG-24支持alpha透明，任何值介于0%和100%之间）。此外，还有许多在线动画GIF生成器免费提供这项服务。制作一张动画GIF不应该超过5分钟

---

由于只有这么多图像，使用GIMP（开源，免费）创建GIF也相当容易。如果保存工作文件，您可以轻松地对图像序列重新排序或更改帧间时间。

请发布您当前使用的javascript代码，以便对其进行分析。难道您不能将这些图像制作成动画GIF吗？这将导致只加载一个图像，并且不需要javascript。@Paul我目前不知道如何生成GIF，但会看到这一点。GIF支持透明吗？一个想法是使用单个压缩图像作为动画的精灵，因此脚本只是更改精灵的背景位置。@Paul是否应该将此作为答案发布？这是一个好主意。我认为GIF会更好：它可以部分加载并仍能正常工作，而您必须等待自己的加载至少四分之一的时间。所以最后的结论是，我制作GIF还是我制作精灵PDE取决于我认为图像有多重。我相信苹果使用了我建议的方法来为应用商店（1.000.000.000下载计数器）设置倒计时@Jeroenmons好吧，在那里使用GIF是荒谬的。4帧110 kb制作一个440kb的精灵，这在现在已经不多了。我个人会选择sprite，因为它更容易创建和编辑，请多给我一些帮助。。。我有一个32位PNG序列，需要布尔透明度，但因为我不知道该怎么做，我必须保留整个alpha通道，否则图像甚至可以使用8位颜色深度。所以问题是，我希望这些图像有8位的颜色深度和布尔透明度。如何做到这一点？将图像加载到类似GIMP的文件中并另存为GIF。这将自动创建一个8位调色板（因为GIF最多只支持256种颜色）。谢谢：）我制作了GIF，并将它们放进了。一个gif为530KB，帧间延迟300毫秒（4帧），另一个gif为130KB，帧间延迟50毫秒（40帧）。只有两件礼物。PC浏览器在显示它们时没有问题，但安卓浏览器却在哭喊：“我的电脑，我的电脑。”(