Хранение в памяти много изображений

Задача состоит вот в чем. Есть сайт с элементами меню, каждый элемент подгружает что-то одно:

• Секвенции (Например моделька 360 состоящая из набора фотографий)
• Видео
• Просто картинка

Не напрягая лишним функционалом, просто сведу к минимуму: Есть кнопка при какой необходимо, чтобы все секвенции, картинки или даже видео подгружались в памяти и при воспроизведении не глючили.

Какие самые благоприятные варианты реализовать это без лагов?

Буду рад любой помощи.

Реализовал загрузку всех изображений в кэш, лаги всё равно есть. Поэтому уже обратился сюда.

Код загрузки изображений в кэш:

!function ($) {
/**
 * В поданный на вход элемент создается div, куда будут помещены изображения.
 * Данную функцию вызывает массив, в каком содержаться пути к изображениям.
 * @param el Элемент, куда будет помещен блок с кэшем
 * @param id Уникальное имя для блока с кэшем
 */
$.fn.preload = function (el, id) {
    if (!el.find('#' + id).exists()) {
        $("<div class='images_cache' id='" + id + "'></div>").hide().appendTo(el);
        this.each(function () {
            $('<img/>').attr("src", this).appendTo("#" + id);
        });
    }
};
}(window.jQuery);

/**
 * Загрузка переданного элемента в кэш (Осуществляет загрузку секвенций и картинок)
 * @param el Dom-element
 * @param index Индекс массива
 */
function preload_item(el, index) {
    var id = el.attr('data-id'), src, frames, arr = [], img_name, directory;
    switch (el.attr('data-content')) {
        case 'sequence':
            src = el.attr("data-path");
            frames = parseInt(el.attr('data-frames'));
            for (var i = 1; i < frames + 1; i++) {
                img_name = src.split('/')[src.split('/').length - 1];
                directory = src.split('/').slice(0, -1).join("/");
                arr.push(directory + "/" + img_name.split('_')[0] + "_" + i + "." + img_name.split('.')[1])
            }
            $(arr).preload(content, img_name.split('_')[0] + id);
            break;
        case 'image':
            src = el.find('img').attr("src").replace('colors_small', 'colors_big');
            img_name = src.split('/')[src.split('/').length - 1];
            directory = src.split('/').slice(0, -1).join("/");
            arr.push(directory + "/" + img_name);
            $(arr).preload(content, img_name.split('.')[0] + id);
            break;
    }
    var images_not_loaded = $(".images_cache > img").not(function () {
        return this.complete;
    });
    var count = images_not_loaded.length;
    if (count) {
        images_not_loaded.load(function () {
            count--;
            if (!count && index === ids.length - 1 && startAnimate) {
                // Если всё загружено, что-то делаем
            }
        });
    } else {
        if (index === ids.length - 1 && startAnimate) {
            // Если всё загружено, что-то делаем
        }
    }
}