Добрый день,
имею веб интервейс на JS, в котором используется около сотни svg картинок. Каждая весит всреднем 1кб (есть и 300 байт, есть и 5кб). Хочу все воткнуть в внутрь самой страницы, чтоб все вместе грузилось кучей (суммарно JS, html, cs и все картинки весят около 200кб, фреймворки удалось не пользовать).
В каждый конкретный момент на экране у меня не более 10 картинок, которые я планировал включать или размещать из JS.
Вижу два решения.
1. Написать эти все картинки со своим уникальным id в <div>, этому div сделать hide, а потом зачитать каждую картинку в JS переменные через document.all('svgNr99').innerHTML а потом втыкать их туда, где мне надо.
2. Еще вариант запарсить их как-то, чтобы можно было в JS в виде присвоений это сделать (но тут читаемость упадет).
Скажите, пожалуйста, а есть ли какой-то более красивый способ, чтобы и картинки не грузить и все вместе внутрь одной страницы засунуть, и, если нет, скажите, пожалуйста, то какой из мной написанных вариантов правильнее с точки зрения минимальности ресурсов и полной совместимости со всеми браузерами?
Спасибо!
И еще вопрос. Часто у меня есть 4-5 svg картинок одного размера, которые я планировал поместить в одно и то же место и хотел их переключать по всяким внешним евентам. Пока планировал присвоением в innerHTML делать, но может есть какой-то правильный селектор, посоветуйте, пожалуйста!
Спасибо!