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