2

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

2 回答 2

2

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

于 2012-08-31T14:49:58.513 回答
1

正如CalMlynarczyk所提议的，我将我的评论作为答案发布。

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

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

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

于 2012-08-31T15:05:15.087 回答