«А нахрена это нам?» или «А что это нам даст?» -- возможно спросите вы. А вот ответьте мне на такой вопрос: что быстрее скачается с флешки: «полтыщи» картинок, старательно надерганых из интернет, суммарным объемом 1 гигабайт или те же «полтыщи» картинок, но одним архивом объемом в гиг? Поэкспериментируйте ;).
Ну да таки перейдем качественных рассуждений к количественным.
Список-меню без использования CSS спрайтов
.list-item {top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none;}
#nav li a {background:none no-repeat left center; display: block; height:85px; width:200px; padding-left:85px;}
#nav li a.fry {background-image:url('images/fry_bw.jpg')}
#nav li a.leela {background-image:url('images/leela_bw.jpg')}
#nav li a.bender {background-image:url('images/bender_bw.jpg')}
#nav li a.zoldberg {background-image:url('images/zoldberg_bw.jpg')}
#nav li a.amy {background-image:url('images/amy_bw.jpg')}
#nav li a:hover.fry {background-image:url('images/fry.jpg')}
#nav li a:hover.leela {background-image:url('images/leela.jpg')}
#nav li a:hover.bender {background-image:url('images/bender.jpg')}
#nav li a:hover.zoldberg {background-image:url('images/zoldberg.jpg')}
#nav li a:hover.amy {background-image:url('images/amy.jpg')}
<ul id="nav">
<li><a class="fry" href="#fry"><div class="list-item">Фрай</div></a></li>
<li><a class="leela" href="#leela"><div class="list-item">Лила</div></a></li>
<li><a class="bender" href="#bender"><div class="list-item">Бендер</div></a></li>
<li><a class="zoldberg" href="#zoldberg"><div class="list-item">Зольдберг</div></a></li>
<li><a class="amy" href="#amy"><div class="list-item">Эми</div></a></li>
</ul>
Результат:
- Объём страницы: 1.45 Kb
- Запросов: 6
- Время загрузки: 0.181 s
Список-меню с использованием CSS спрайтов
.list-item {left:10px; top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none; clear:both; height:85px; width:200px;}
#nav li a {background:url('images/futurama.jpg') no-repeat; display: block; height:75px; width:75px; float:left;}
#nav li a.fry {background-position:0 0;}
#nav li a.leela {background-position:0 -75px;}
#nav li a.bender {background-position:0 -150px;}
#nav li a.zoldberg {background-position:0 -225px;}
#nav li a.amy {background-position:0 -300px;}
#nav li a:hover.fry {background-position:-75px 0;}
#nav li a:hover.leela {background-position:-75px -75px;}
#nav li a:hover.bender {background-position:-75px -150px;}
#nav li a:hover.zoldberg {background-position:-75px -225px;}
#nav li a:hover.amy {background-position:-75px -300px;}
<ul id="nav">
<li><a class="fry" href="#fry"></a><span class="list-item">Фрай</span></li>
<li><a class="leela" href="#leela"></a><span class="list-item">Лила</span></li>
<li><a class="bender" href="#bender"></a><span class="list-item">Бендер</span></li>
<li><a class="zoldberg" href="#zoldberg"></a><span class="list-item">Зольдберг</span></li>
<li><a class="amy" href="#amy"></a><span class="list-item">Эми</span></li>
</ul>
Результат:
- Объём страницы: 1.40 Kb
- Запросов: 2
- Время загрузки: 0.137 s
Даже при тестировании на локальном сервере видно, что скорость загрузки страницы увеличивается при использовании CSS спрайтов.
4 Комментариев :
У вас в этом посте, картинка одна сбежала влево, подправите?)).
Спасибо :) На самом деле так и задумано: CSS: Заметки на полях.
А ну ясно, тогда нужно подумать к чему это можно приурочить))
И еще, можно в блоге сделать такое, чтобы при обновлении менялось изображение, допустим в фоне?
Это несложно реализовать с помощью Javascript. Другое дело – не совсем понятно, для чего это нужно :). Кроме как для «красивостей» – разумеется.
Хотя, недавно пришла на ум небольшая модификация этого «эффекта». Так или иначе, – добавил вопрос в “ToDo-лист”.
Отправить комментарий
Жги!