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

Question

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

Answer 1

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

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

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

Answer 2

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

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

CSS:

.hoverDiv          /* Normal state */
{
    background: url('images/img.png');
    background-position: 0px 0px;
}

.hoverDiv:hover    /* Hover state */
{
    background-position: 0px -20px;     /* Move background up by 20px, hiding the top image */
}

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

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

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

Джеймс

Answer 3

вы можете использовать css sprites

Answer 4

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

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

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