Генерация поля из 8000 картинок на стороне клиента VS генерация картинки на сервере

[xintrea]

Господа, вопрос такой.

Мне нужно в одном проекте показать, так сказать, "замороженное состояние" системы.

Это состояние описывается ~8000 картинками-пиктограммами. Одна пиктограмма кодируется двумя ASCII символами (первый символ - подложка пиктограммы, второй - рисунок поверх подложки).

Чтобы визуализировать эти ~8000 пиктограмм, я могу поступить двумя путями:


1. Передавать в браузер ~16Кб текстовых данных, и в браузере ява-скриптом визуализировать эти 8000 пиктограмм (размер пиктограммы 24x24 пикселя).

Тут проблема - а не пополохеет ли браузеру, если разместить 8000 картинок, каждая пара из которых будут с наложением друг на друга? А не замучается ли пользователь дожидаться конца развертывания такого представления информации?


2. Генерировать картинку на стороне сервера средствами PHP.

Тут вылазит проблема нагрузки на сервер, проблема хранения кеша чтоб не перегенерировать картинки заново, синхронизация картинок и базы.


Вопрос. По какому пути лучше всего пойти? Как бы вы решали такую задачу?

 

[fixxxer]

3. заранее сгенерировать все возможные картинки

4. спрайтами - особенно если есть часто встречающиеся комбинации

5. генерировать svg

6. рисовать на canvas-е

7. сделать флэшку

 

[xintrea]

3. - не вариант
4. - хардкор, несопровождаемо
5. - не кроссбраузерно (?)
6. - не кроссбраузерно (?)
7. - не кроссплатформенно.

 

[ksnk]

первый символ - подложка пиктограммы, второй - рисунок поверх подложки

тоесть всего не более 500 разных картинок (256 фон и 256 поверх), а совсем не 8000?

 

[ksnk]

24x24 на 256, раскладывая по 16 в ряд - картинка 384x384 со всеми возможными фонами и вторая со всеми возможными изображениями "поверх". Не такой , вроде, и оверлод получается.

Какие есть ограничения на показ? Кто смотрит? Админ-специальный юзер или простой юзер. Админ может и подождать.

По черному, imho, проще сделать на JS.
Канвас, кстати, очень даже кроссбраузерный, в нонешних реальностях.

 

[hell0w0rd]

http://caniuse.com/#search=svg - где же не кроссбраузерно ровно как и http://caniuse.com/#search=canvas
а в чем хардкордность спрайтов? Можно рядом с спрайтом хранить карту спрайта
Только вот картинки у вас мелкие и спрайт на мой взгляд еще тот оверхед
И если в файле все много повторений - 16кб не плохо сожмутся

 

[xintrea]

24x24 на 256, раскладывая по 16 в ряд - картинка 384x384 со всеми возможными фонами и вторая со всеми возможными изображениями "поверх". Не такой , вроде, и оверлод получается.

Какие есть ограничения на показ? Кто смотрит? Админ-специальный юзер или простой юзер. Админ может и подождать.

По черному, imho, проще сделать на JS.
Канвас, кстати, очень даже кроссбраузерный, в нонешних реальностях.

Ну там возможных картинок подложек 10 штук и 16 картинок что поверх накладываются. Так что даже текстуру делать не имеет смысла, картинки можно и по отдельности подгрузить, тем более что они в проекте везде используются и будут закешированы.

Наверно сделаю через JavaScript, нагенерирую <table> и все. Прикинул на jsfillde на символах вместо картинок - работает мгновенно.