Прелоад через CSS
Структурирую свою информацию - несколько способов избежания страшненьких джаваскриптов делающих прелоад картинок.
Проблема
Пускай у нас для какого-то элемента по наведению мыши меняется фоновая картинка, типа такого:
a{<br />
background-image:url(default_img.gif)<br />
}<br />
a:hover{<br />
background-image:url(hover_img.gif)<br />
}
В результате когда страничка (и картинка default_img.gif) загрузится и пользователь наведет мышь на ссылку - броузер начнет грузить картинку hover_img.gif и пользователь сразу ничего не увидит. А если картинка немаленькая, то и пару секунд ничего видеть не будет.
Вот для этого и нужен так называемый прелоад, загрузить картинки сразу, что бы пользователь не видел этого мигания. Далее следуют 4 способа избежать мигания.
1. Метод Pixy
Идея проста - что бы исключить прелоад нужно… исключить вторую картинку.
Помещаем обе картинки для HOVER и для DEFAULT в одно избражение и по наведению мышки просто меняем позицию фона:
a {<br />
background: url(”img.gif”) no-repeat 0 0 ;<br />
}<br />
a:hover {<br />
background-position: 0 -40px;<br />
}<br />
a:active, a#here {<br />
background-position: 0 -80px;<br />
}<br />
Конечно, это означает фиксированую высоту (или ширину) блока для которого мы делаем этот фон. Иначе фоны бы отображались более одного за раз, или еще как-нить криво.
ИЕ однако и тут выпендрился и решил что так как фон меняется, то надо че то дозагружать. Это так называемый flicker эффект - метод борьбы с ним прост - но не всегда реализуем - нужно задать фон для внешнего блока - и тогда ховер эффект реализовывать не смещением позиции фона - а просто его убиранием.
Таким образом в ИЕ можно избавиться от мигания и “дозагрузок” картинок.
Примерно так:
#outer{<br />
background: url(”hover_img.gif”) no-repeat 0 0;<br />
}<br />
a{<br />
background: url(”default_img.gif”) no-repeat 0 0;<br />
}<br />
a:hover {<br />
background: none;<br />
}
* Оригинальная статья обратите внимание на Update внизу - к вопросу о мигании в ИЕ6
2. Прелоад через a:link
Таким образом можно закэшировать hover_img.gif для элемента навигации.
Селектор a:link “перебивает” просто a - поэтому визуально ничего не изменится, но броузер поместит файл в кэш:
a{<br />
background-image: url(”hover_img.gif”);<br />
}<br />
a:link,a:visited{<br />
background-image: url(”default_img.gif”);<br />
}<br />
a:hover{<br />
background-image: url(”hover_img.gif”);<br />
}
Этот метод в принципе похож на четвертый, но для полноты я описал их отдельно.
* Preload :hover images in CSS
3. “Дырявая” картинка
Суть такова - в качестве фоновой картинки берем “дырявую”, то есть ГИФ с прозрачными областями. А собственно :hover эффект делаем сменой фонового цвета, а не картинки. Однако нам придется фиксировать высоту и ширину элемента, да и сам эффект будет состоять лишь в смене цвета определенной области - но тем не менее:
a {<br />
background:#ccc url(”img.gif”) no-repeat 0 0;<br />
}<br />
a:hover {<br />
background-color:#c00;<br />
{
Впервые столь простую идею увидел на Simplebits с год-два назад - сейчас уже не смог найти линк.
К примеру: все следующие изображения сделаны с помощью одной и той же картинки - лишь сменой фонового цвета: *, *, *, *. Фоновый цвет “светит” через прозрачные дыры в картинке. Сама же картинка лишь белого цвета.
Идею можно применять не только для :hover эффектов, но и для многоразового юзания одной картинки в разных цветах.
4. Прелоад через указание фона для чего-нибудь
Можно поместить картинку для :hover в кэш браузера путем таких вот махинаций:
h2 {<br />
background:url(”hover_img.gif’) no-repeat;<br />
background-position:-1000px -1000px;<br />
}<br />
Отличается от номера 2 только тем, что тут фон прячут позицией, а не “перебиванием” более сильным селектором.
* Подсмотрено тут
В конце
Все здесь описанное не претендует на оригинальность - скорее структурирую свои же знания - да и вдруг кому-то это окажется полезным. Почти все приемы просты до безобразия. Но в этом вся соль.
Как говорил один человек - я горжусь тем, что так много “украл” у других. :)
Кто знает еще какие-то способы - пишите в комменты. Думаю от этого выиграем мы все.
Автор akella