CSS: кэш изображений состояния наведения

Когда мы определяем состояние наведения чего-либо CSS... и на состояние наведения мы меняем background:url('image path'); будет ли предварительно загружено это изображение, будет ли оно загружаться при первом наведении на элемент... если это так, то как его предварительно загрузить... я знаю javascript для предварительной загрузки изображений... это будет работать...

Источник

4 ответа

Решение

Если вы пытаетесь не загружать изображения, находящиеся в состоянии наведения, только на те, на которых они находятся, вместо предварительной загрузки, то почему бы не создать спрайты, содержащие как обычные, так и наведенные изображения? Таким образом, вы можете быть уверены, что все ваши изображения состояния при наведении уже будут загружены, и в то же время сбросить накладные расходы для всех запросов. Единственное, что вам нужно будет сделать, это установить значение background-position приписывать.

Что касается вашего первого вопроса, я полагаю, что лучший способ найти ответ - использовать два больших изображения (пара обоев подойдет) и протестировать их самостоятельно, хотя я подозреваю, что изображения будут загружаться только тогда, когда мышь находится над исходное изображение, потому что это когда код выполняется.

Надеюсь это поможет!

Источник

Если у тебя есть div высоты 20px скажем, и вы хотите, чтобы фоновое изображение изменялось при наведении, используйте изображение с графикой без наведения и при наведении на него, с наведением вверху и с наведением внизу. Обе части должны быть высотой вашего div, в данном случае, 20px. Затем установите свой CSS background-position первым 0px 0px (верхний левый). Это по умолчанию (без наведения).

Когда пользователь наводит курсор на div, установить background-position в 0px -20px (20 пикселей вверх). Это сместит фоновое изображение вверх на 20 пикселей, показывая нижнюю половину спрайта, который является парящей графикой. Когда мышь удаляется из div, спрайт возвращается в исходное положение.

CSS:

.hoverDiv / * Нормальное состояние * /
{
    background: url ('images / img.png');
    background-position: 0px 0px;
}
.hoverDiv: hover / * Состояние наведения */
{
    background-position: 0px -20px;     /* Переместить фон на 20 пикселей вверх, скрывая верхнее изображение */
}

Если у тебя есть div разной высоты, просто измените 20px биты с высотой дел.

Если ваши спрайты расположены рядом друг с другом, а не друг над другом, переместите ось X, используя background-position: -20px 0px; вместо 0px -20px;, Конечно, вы также можете перемещать фон положительно.

Надеюсь это поможет,

Джеймс

Источник

Вы могли бы использовать спрайты CSS

Источник

Лучше всего использовать CSS Sprites. Спрайт-лист - это большое изображение с множеством изображений, которое будет использоваться на вашем сайте. В чем выгода? Ну, это означает, что для загрузки всех ваших изображений отправляется только один http-запрос. Поэтому загрузка сайта немного быстрее.

Это будет действительно хорошо работать с эффектом парения!

Это намного проще в использовании и простой код. Не как JavaScript, с грязным и ужасным кодом. Это очень легко учиться. Основано на положении изображения в спрайте. Вот полезное руководство по Flowdev. Вот пример на W3Schools

Источник
Другие вопросы по тегам