У меня есть картинки, которые много раз используются в разных местах одного html. Беда в том, что я хочу картинки включать с использованием data URI и включать их каждый раз в месте использования получается неэффективно с точки зрения размера, да и технически сложно: картинки хочется включить где-нибудь в конце документа в невидимом div и потом как-то использовать ссылаясь на них (это просто сделать потому что).
Практически я сейчас вынужден делать, например, такую вещь. Вставлять картинки как <img src=«#idxxx» class=«autoimg» attributes> в местах использования и один раз в конце как <img id=«idxxx» src=«data:....»> Потом, после загрузки документа, делать document.getElementsByClass(«autoimg») и для каждой такой картинки вставлять вместо неё ту, что с id=«idxxx», а атрибуты брать из той, где src=«#idxxx», последнюю потом удалять. Но у меня ещё картинки нужны в CSS. Можно такую замену сделать в CSS но уже неудобно. А ведь стили ещё могут быть в атрибутах элементов... совсем неудобно. Картинки в стилях нужны для смены картинки при :hover и :active.
Может это можно сделать как-то иначе? Вообще задача множественного использования какого-либо ресурса в программировании типичная же. А в html как-то неудобно получается, каждый раз заново одно и то же загружать...
Пока писал, подумал — можно загрузить так одну картинку (через data URI) и использовать т.н. CSS-спрайты примерно таким образом: в нужном месте вставляется <object id=«name»></object> и для него пишется стиль (хоть в атрибутах, хоть в <style>), что у него background-image: url(image.png) ... И тут образуется ещё один лишний файл. Неудобно, не будем развивать holywar почему.
Можно data URI применить так: в CSS делаются отдельные классы, для которых пишется background-image: url(data:...), и применить в зависимости от нужных картинок классы к нужным элементам. Вроде, это хорошее решение.
Может кто подскажет что-то ещё?
Eщё хотел спросить вдогонку. Мне в html нужно включить (опять же, не отдельным файлом) SVG или ещё что-нибудь такое. Проблема в том, что браузер пытается его отображать сразу. А отображать мне не нужно. Мне для использования в стилях, например (через url(#id), здесь, в отличии от картинок, по id можно почему-то, а картинки требуют только файла). И в неотображаемый div положить нельзя — не будет работать. Приходится делать position fixed, вне экрана и в нижнем слое, например. Как включать «неотображаемые» элементы в html? Понятно, что после загрузки на javascript там что угодно сделать можно. Но хочется меньше программировать то, что можно не программировать.
