jQuery动画：预加载+延迟功能

Question

我有一个循环的120帧30fps动画，所有PNG文件，以及所有大约600x600px。不幸的是，这些事实是不可谈判的，所以我必须找出一些方法来使其发挥作用。

我的脚本如下所示：

var path = "[[my image path]]";
var nbImages = 120;
var frames = [];

function nextFrame() {
    $("[[my image id]]").attr('src', frames[0]); 
    frames.push(frames[0]);
    frames.shift();
}

$(document).ready(function(){
    for (var x = 0; x <= nbImages; x++) { 
        frames.push(path + (x+1) + ".png"); 
    }
    setInterval(function(){ nextFrame(); }, 1000/30);
});

我的问题当然是加载时间。在第一页视图中，不仅图像需要一百万年才能加载，但动画一旦可用就开始显示少量加载的图像。

我已经阅读了预加载图片，但我一直看到有冲突的解决方案，即使只是针对jQuery脚本。至于现有的StackOverflow答案，我试过的那些实际上使得加载速度变慢 - 而不仅仅是第一次访问。所有其他的都不适用于图像序列。

- 在这种情况下，哪种预加载方法最合适？

- 只有在加载所有图片后才启动动画的正确语法是什么？

其他一切正常。