У меня есть элемент hover, когда я наводил на него курсор, менялось фоновое изображение. Это нормально, но он загружает изображение только тогда, когда я навешиваю его на него, а не раньше, и я вижу пустое поле на короткое время. Как предварительно загрузить изображения?Предварительная загрузка фонового рисунка CSS
В начале вашего тела, загрузите изображение скрыто:
<body>
<img src="myimage.png" style="display: none;" />
</body>
Браузер будет использовать его кэш, чтобы поймать тот же образ, чтобы загрузить в качестве фона при вызове его, таким образом, без задержки.
Если это background-image, то вы можете использовать один из следующих методов:
Техника # 1
Загрузите изображение на обычном состоянии элемента, только сдвинуть его в сторону с фоновой позиции. Затем переместите положение фона, чтобы отобразить его при наведении.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Техника # 2
Если данный элемент уже имеет фоновое изображение применяется, и вы должны изменить это изображение, выше не будет работать. Обычно вы можете найти спрайт здесь (комбинированное фоновое изображение) и просто сдвинуть положение фона. Но если это невозможно, попробуйте это. Примените фоновое изображение к другому элементу страницы, который уже используется, но не имеет фонового изображения.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
Источники:
Не, в обоих случаях изображение еще только загружены в медиа-кэш браузера? Приятно, как вы показываете подходы, но веб-страница использует все файлы в одной и той же загруженной среде, что делает ненужным стирать ее где-то со смещением. В некоторых браузерах эти отрицательные смещения будут работать некорректно или даже вернуть фон обратно к индексу 0, создавая нежелательные результаты. – 2013-03-24 12:05:28