Question

我们试图通过一系列图像改变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;
}

Answer 1

通过将所有四个图像彼此相邻放置来创建一个大型复合背景图像。然后加载背景并改变它的位置（因此它显示四个'帧'中的一个）每300毫秒而不是每次加载一个新背景

Answer 2

根据CalMlynarczyk的建议，我将发表评论作为答案。

你应该从这些图像中制作动画GIF。这将导致只加载一个图像，不需要javascript（这意味着它也适用于禁用的JavaScript）。

关于透明度，GIF支持它，但只支持布尔方式（像素是100％透明或不透明，而PNG-24支持alpha透明度，任何值在0％和100％之间）。此外，还有许多在线动画GIF发生器，免费提供服务。不应该花费超过5分钟来获得动画GIF。

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

动画通过改变div的背景图像

2 个答案: