Реактивные веб-сайты

e?‡IUE?AOIOA ?A?AIEA: O·O?I‡ EAO·?‡EAIEE

Дальше начинается самое ин-

тересное: как нам вышеописан-

ные группы «склеивать»? Для это-

го используется следующий алго-

ритм:

1. Изображения, для кото-

рых позиционирование

задано в процентах и ко-

торые находятся внутри

контейнеров с абсолют-

ными размерами, коррек-

тируются, чтобы фоновая позиция была задана в аболютных еди-

ницах.

2. repeat-x изображения (группа 3) объединяются все вместе по

вертикали. Попутно правится ширина фоновых изображений

(приводится к наименьшему общему кратному). В самое начало

такого файла добавляются no-repeat изображения, подходящие

по ширине (группа 1). Далее в самый низ файла записывается 1

изображение из группы 4. Больше 1 все равно никуда не войдет,

поскольку нам нужно обеспечить свободное пространство ниже

заявленной высоты фонового изображения. Это часто бывает

нужно для плавного перетекания градиента в ровный цвет: гра-

диент вставляется фоновой картинкой, которая заканчивается на

фоновом цвете, а дальше продолжается уже этот цвет, заданный

через background-color.

———————— Page 135————————

134 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

3. Производятся абсолютно аналогичные действия с repeat-y.

4. Далее изображения из группы 7 объединяются по вертикали (0

100%означает, что фон должен быть прижат к правому краю эле-

мента, соответственно, весь спрайт будет «прижат» к правому

своему краю).

5. Аналогично с группой 8 — прижимаем все к низу. Естественно,

что для всех групп мы учитываем первоначальное значение

background-position.

6. Рассчитываем позиционирование для изображений группы 1

(для этого подойдет и просто перебор отсортированных по пло-

щади или сумме квадратов измерений изображений: готовим ма-

трицу, в которую пытаемся «вписать» очередное изображение;

если не получается, то матрицу увеличиваем). При вписывании

ради экономии процессорного времени можно проверять только

9 точек (8 по краям изображения и 1 в центре), чтобы убедиться,

что на месте изображения еще ничего нет.

7. Строим «лесенку» из изображений второй группы. Лесенку

лучше строить с низа уже созданного спрайта из предыдущего

пункта: тогда легко найти минимальный размер «дырки» меж-

ду двумя группами изображений, чтобы сдвинуть «лесенку»

вверх (и потом, возможно, влево). Конечно, поиск наиболее

оптимального расположения — непростая задача. Но ее мож-

но решить и в достаточно грубом приближении, которое описа-

но выше.

8. Итоговое изображение из пункта 4 прикрепляется к правому

верхнему углу нашего сложного изображения (результат дейст-

вия пунктов 6 и 7). Так как у каждого такого изображения зада-

на допустимая высота и все они находятся вне «рабочей» зоны

остальных no-repeat изображений, никаких рудиментов не воз-

никнет.

9. Аналогичным образом поступаем с изображением из пункта 5 —

его располагаем в нижнем левом углу нашего спрайта.

10. На выходе мы получаем 3 спрайта со всеми возможными случа-

ями. В среднем размеры таких спрайтов будут лишь незначи-

тельно превосходить (если вообще будут) аналогичные «руч-

ные» аналоги (в том числе за счет использования PNG). Естест-

венно, можно в автоматическом режиме пропустить их через

pngcrush или jpegtran. Стоит также предусмотреть, в каком ви-

де будут создаваться полноцветные изображения: JPEG или PNG

(последние больше по размеру, но гарантируют отсутствие по-

терь качества).

———————— Page 136————————

5

3

Уменьшение количества запросов 1

При расчете позиции картинки в конечном спрайте может помочь

следующая схема:

Рис. 4.1.