javascript - 通过改变div的背景图像来实现动画

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 毫秒加载背景并更改其位置(因此它显示四个“帧”之一)，而不是每次加载新背景