Упакуйте все изображения в один архив на сервере и распакуйте на стороне клиента - PullRequest
Новая
       3

Упакуйте все изображения в один архив на сервере и распакуйте на стороне клиента

4 голосов
/ 14 августа 2011

Итак, возможно ли создать архивные (/ двоичный массив?) Файлы на стороне сервера и затем отправить их + сгенерированную HTML-страницу во время выполнения. Я думаю, что это. И интересно, есть ли библиотеки для этого. Особенно на стороне клиента.

Основные вопросы сейчас: 1. Как передать изображение: как переменную js? Нравится var imagebinary = "3nmrnmfu5...." 2. Как превратить изображение обратно в двоичный формат и вставить его, где это необходимо.

Теперь я думаю об использовании данных: URL.

tomfumb предложил блестящее решение, которое использует Google: одно «большое» изображение, которое на клиенте попало на мелкие кусочки.

1 Ответ

1 голос
/ 20 октября 2011

Я думаю, что технику, которую вы ищете, часто называют "CSS-спрайтами", и там есть довольно много хороших статей о них (просто спросите ваш любимый поисковик).Вместо этого есть другие методы, использующие Javascript, но мне сам метод CSS очень нравится.

Есть довольно хорошие статьи по адресу:

http://www.alistapart.com/articles/sprites

http://www.w3schools.com/css/css_image_sprites.asp

и многие другие.

Идея состоит в том, чтобы объединить все изображения в одно большое изображение, а затем использовать CSS для управления тем, какие части большего изображения отображать в каждом конкретном случае.

Скажем, у вас есть четыре изображения одинакового размера, 1,2,3,4 (они не обязательно должны быть одинакового размера, но это упрощает объяснение

Объедините их в одно увеличенное изображение, используя вашу любимую серверную частьimage toolkit. Что-то вроде GD из PHP, или ImageMagick, или PIL, если вы используете Python. Большинство серверных комплектов имеют библиотеку, которая может объединять изображения.

1234

Затем создайте правила CSSкоторый отобразит соответствующую часть большего изображения на клиенте:

, например: 

div.sprite {  height:100px; width:100px;  }
#image1 {  background: url(bigimg.png) 0 0; }
#image2 {  background: url(bigimg.png) -100px 0; width: 100px;}
#image3 {  background: url(bigimg.png) -200px 0; width: 100px;}
#image4 {  background: url(bigimg.png) -300px 0; width: 100px;}

и HTML-код для их отображения: 

<div id='image1' class='sprite'></div> 
<div id='image2' class='sprite'></div> 
<div id='image3' class='sprite'></div> 
<div id='image4' class='sprite'></div>

Этотакие вещи, вероятно, не слишком разныеэто автоматизировать.

...