Предзагрузка изображений
Всем "Ау"!
Есть такая проблема. Облако Аксмы не позволяет локально хранить файлы большее 80Мб, я стараюсь добавлять изображения прямыми ссылками. (Тот еще геморрой, и если кто знает решение, поделитесь, как вы обходите его) Все зависит от скорости интернета браузера, потом добросовестности облачных зеркал и размеров самой картинки.
Изображения разных размеров, функция sprite() задает все спрайты одновременно, но если изображения не подгрузились, происходит боль - что-то вывелось, что-то нет. А если еще силами Аксмы прописывать анимацию и функции таким кнопкам - то там вообще ересь.
и вот как в код прописать строку предзагрузки всех изображений? Чтобы браузер получил ссылки на изображения, и начал копировать их себе в буфер, пока не появились функции sprite() для их вывода? как вариант думал создать страницу, на которой будет что-то крутиться, пока проходит загрузка.
Пробовал нативными инструментами Аксмы по типу выполнения функции после загрузки спрайта такое провернуть, не вышло. аргумент спрайт.visible становится true не после загрузки изображения, а практически сразу по завершению функции, и для динамичного отслеживания не подходит.
Гуру, поправьте, я оставлю "Дедовский" способ в духе аксмы.
Знаю, есть способы изящнее.
Все картинки я вывел спрайтами через массив, можно с низким значением прозрачности.
далее код:
// Получение картинок и запись их в переменную
let images = document.querySelectorAll('img');
// Объявление переменной и присваивание ей результат работы функции
let imageInterval = setInterval(() => {
x = 0;
// Создаем условие для очистки работы метода setInterval
images.forEach(function(item) {
console.log('image ' + item.complete);
if (item.complete) {
++x
};
})
//console.log(x);
//console.log(images.length);
if (x == images.length) {
clearInterval(imageInterval);// Очищаем переменную imageInterval
sprites(true);
goto("Main menu"); //переход в игру после загрузки
};
}, 50)
Работает кривенько, но позволяет прогрузить все картинки из ссылок в кэш браузера.