Ускорение загрузки страниц сайта посредством CSS спрайтов.


Ускорение загрузки страниц сайта посредством CSS спрайтов.

Для ускорения загрузки страниц сайта эффективно использовать CSS спрайты (sprites), это намного сокращает количество HTML запросов к серверу. Под CSS спрайтом понимается объединение нескольких небольших картинок в одну и отображение нужной из них посредством свойств CSS.

Обычно любой браузер без использования CSS спрайтов для каждой картинки отправляет отдельный http запрос к серверу. Если Вы объедините несколько картинок в одну, то браузеру будет достаточно сделать один запрос для того, чтобы взять в свой кэш единственную картинку и посредством кода CSS файла выдавать нужный фрагмент из спрайта. Именно это ускоряет открытие на компьютере пользователя (посетителя) страницы сайта.

Использование спрайтов - это всего лишь один из способов ускорения открытия страниц сайта. Существует еще множество новых технологий и идей для совершенствования интернет проектов. Проводимый в рамках УРИФ ( Украинский Региональный Интернет-Форум) конкурс для авторов уникальных стартапов, не раз доказывал, что новое поколение полно свежих идей в сфере IT-технологий. При желании и Вы можете принять участие в конкурсе разработчиков, который состоится в марте-апреле 2014. Ваши идеи и разработки будут оцениваться от 5 000 до 10 000 долларов в зависимости от занятого призового места и 10 лучших участников получат приглашения на вакансии в известных маркетинговых кампаниях.

Удобно использовать спрайты при создании эффекта замены изображения другим при наведении на него мышки, часто это используется для отображения кнопок со сменным фоном (свойство CSS background-position).

Пример простого CSS-спрайта со сменой фона при наведении.
Состоит из двух картинок собранным в спрайт.
- Высота каждой картинки 30 пикселей.
- Верхняя картинка - это обычное состояние кнопки. Нижняя картинка - это изображение кнопки при наведении мыши.
- Высота кнопки задается в CSS файле 30 пикселей и спрайт устанавливается как фон.
- При смещении фона в CSS на 30 пикселей вверх будет виден нижний рисунок.

<a href="#" class="blue1">Кнопка</a>

a.blue1 {
display: block;
height: 30px;
background: url('sprite.jpg') 0 0 no-repeat;
width: 150px;

}

a.blue1:hover {
background-position: 0px -30px; /* двигаем вверх */
}

При наведении мыши на кнопку её фон будет изменяться при использовании только одного файла.
При формировании background-position первым следует задать смещение по горизонтали, вторым по вертикали.

Скачать пример спрайта иконок соцсетей с картинкой и CSS кодом:

Скачать: sprite.rar [59,72 Kb] (cкачиваний: 16)

Автор: Saah | Просмотров: 999 | 15-02-2014,Сб, 21:40  

Добавить свой комментарий:

@
Похожие публикации