jQuery Animation: предварительная загрузка + отложенная функция

Question

У меня есть зацикленная 120-кадровая анимация 30 кадров в секунду, все файлы PNG и все вокруг 600x600 пикселей. Эти факты, к сожалению, не подлежат обсуждению, поэтому я должен что-то придумать, чтобы это сработало.

Мой сценарий выглядит так:

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. Что касается существующих ответов Stackru, то те, которые я пробовал, фактически замедлили загрузку - и не только при первом посещении. Все остальные не относятся к последовательностям изображений.

- Какой метод предварительной загрузки является наиболее подходящим, в этом случае?

- Какой правильный синтаксис для запуска моей анимации только после загрузки всех изображений?

Все остальное работает правильно.