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

Задача состоит вот в чем. Есть сайт с элементами меню, каждый элемент подгружает что-то одно:
Секвенции (Например моделька 360 состоящая из набора фотографий) Видео Просто картинка
Не напрягая лишним функционалом, просто сведу к минимуму: Есть кнопка при какой необходимо, чтобы все секвенции, картинки или даже видео подгружались в памяти и при воспроизведении не глючили.
Какие самые благоприятные варианты реализовать это без лагов?
Буду рад любой помощи.

Реализовал загрузку всех изображений в кэш, лаги всё равно есть. Поэтому уже обратился сюда.
Код загрузки изображений в кэш:
!function ($) { /** * В поданный на вход элемент создается div, куда будут помещены изображения. * Данную функцию вызывает массив, в каком содержаться пути к изображениям. * @param el Элемент, куда будет помещен блок с кэшем * @param id Уникальное имя для блока с кэшем */ $.fn.preload = function (el, id) { // Если элемента с указанным идентификатором не существует, то загружаем в кэш if (!el.find('#' + id).exists()) { // Формируем блок, где будут лежать указанные изображения $("

").hide().appendTo(el); // Проходим каждый элемент массива и формируем изображение this.each(function () { $('').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]) } // Записываем в кэш и передаем элемент в каком будет содержаться images_cache и уникальное имя для него $(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; }
// Получаем список все img, какие не успели загрузиться var images_not_loaded = $(".images_cache > img").not(function () { return this.complete; });
var count = images_not_loaded.length;
// Если кол-во > 0 if (count) { // Записываем их images_not_loaded.load(function () { count--; // Если уже нечего записывать и "левая переменная" if (!count && index === ids.length - 1 && startAnimate) { // Что-то делаем } }); } else { // Если уже нечего записывать и "левая переменная" if (index === ids.length - 1 && startAnimate) { // Что-то делаем } } }

Ответ

Загружайте изображения через new Image(); .src даст вам путь. .onload создаст событие окончания загрузки - потом устанавливайте в требуемый вам div.
Как полагаю, часть проблем у вас от того, что вы все добавляете в DOM, что также нагружает браузер.
Как пример, используйте вот такой вариант:
var images = {}; // Массив изображений
function preload(el){ var id = el.attr('data-id'); var content = el.attr('data-content');
var obj = { loaded: 0, images: [] }; var src = el.attr('data-path'); /// тут непонятно как вы генерируете пути var arr = (content === 'sequence') ? getImageUrlsFromSequenceData() : getImageUrlsFromImageData(); /// но предположим в конце у нас их будет массив arr arr.forEach(function(item){ //создаем элемент Image var image = new Image(); //устанавливаем событие для получения того, что оно загрузилось //количество незагруженных вы можете получить через obj.images.length-obj.loaded image.onLoad=getActionOnLoad(obj); //назначаем урл image.src=item; //добавляем в массив obj.images.push(image); }); //добавляем в ссылочный массив images[id] = obj; }
function getActionOnLoad(obj){ return (function(){ obj.loaded++; //тут еще можно вызывать требуемый нам каллбек, если loaded //достигло images.length. его можно добавить в параметры прелоадера }); }
function getImageUrlsFromSequenceData(data){ //тут вы генерируете ссылки для sequence return []; } function getImageUrlsFromImageData(data){ //тут вы генерируете ссылки для Image return []; }