Пускай у нас для какого-то элемента по наведению мыши меняется фоновая картинка, типа такого:

1. a{
2. background-image:url(default_img.gif)
3. }
4. a:hover{
5. background-image:url(hover_img.gif)
6. }

В результате когда страничка (и картинка default_img.gif) загрузится и пользователь наведет мышь на ссылку – броузер начнет грузить картинку hover_img.gif и пользователь сразу ничего не увидит. А если картинка немаленькая, то и пару секунд ничего видеть не будет.

Вот для этого и нужен так называемый прелоад, загрузить картинки сразу, что бы пользователь не видел этого мигания. Далее следуют 4 способа избежать мигания.

1. Метод Pixy
Идея проста – что бы исключить прелоад нужно… исключить вторую картинку.

Помещаем обе картинки для HOVER и для DEFAULT в одно избражение и по наведению мышки просто меняем позицию фона:
1. a {
2. background: url(”img.gif”) no-repeat 0 0 ;
3. }
4. a:hover {
5. background-position: 0 -40px;
6. }
7. a:active, a#here {
8. background-position: 0 -80px;
9. }
Конечно, это означает фиксированую высоту (или ширину) блока для которого мы делаем этот фон. Иначе фоны бы отображались более одного за раз, или еще как-нить криво.

ИЕ однако и тут выпендрился и решил что так как фон меняется, то надо че то дозагружать. Это так называемый flicker эффект – метод борьбы с ним прост – но не всегда реализуем – нужно задать фон для внешнего блока – и тогда ховер эффект реализовывать не смещением позиции фона – а просто его убиранием.
Таким образом в ИЕ можно избавиться от мигания и “дозагрузок” картинок.

Примерно так:

1. #outer{
2. background: url(”hover_img.gif”) no-repeat 0 0;
3. }
4. a{
5. background: url(”default_img.gif”) no-repeat 0 0;
6. }
7. a:hover {
8. background: none;
9. }

2. Прелоад через a:link

Таким образом можно закэшировать hover_img.gif для элемента навигации.
Селектор a:link “перебивает” просто a – поэтому визуально ничего не изменится, но броузер поместит файл в кэш:

1. a{
2. background-image: url(”hover_img.gif”);
3. }
4. a:link,a:visited{
5. background-image: url(”default_img.gif”);
6. }
7. a:hover{
8. background-image: url(”hover_img.gif”);
9. }

Этот метод в принципе похож на четвертый, но для полноты я описал их отдельно.

3. “Дырявая” картинка

Суть такова – в качестве фоновой картинки берем “дырявую”, то есть ГИФ с прозрачными областями. А собственно :hover эффект делаем сменой фонового цвета, а не картинки. Однако нам придется фиксировать высоту и ширину элемента, да и сам эффект будет состоять лишь в смене цвета определенной области – но тем не менее:

1. a {
2. background:#ccc url(”img.gif”) no-repeat 0 0;
3. }
4. a:hover {
5. background-color:#c00;
6. {

Впервые столь простую идею увидел на Simplebits с год-два назад – сейчас уже не смог найти линк.

К примеру: все следующие изображения сделаны с помощью одной и той же картинки – лишь сменой фонового цвета: *, *, *, *. Фоновый цвет “светит” через прозрачные дыры в картинке. Сама же картинка лишь белого цвета.

Идею можно применять не только для :hover эффектов, но и для многоразового юзания одной картинки в разных цветах.

4. Прелоад через указание фона для чего-нибудь

Можно поместить картинку для :hover в кэш браузера путем таких вот махинаций:

1. h2 {
2. background:url(”hover_img.gif’) no-repeat;
3. background-position:-1000px -1000px;
4. }

Отличается от номера 2 только тем, что тут фон прячут позицией, а не “перебиванием” более сильным селектором.