Задержка при загрузке фоновых изображений CSS

Question

У меня есть некоторые вкладки для моего сайта, где фоновое изображение изменяется, когда вы нажимаете на них.

Однако, когда я нависаю над вкладками в первый раз после загрузки DOM, есть небольшая задержка перед показом hover-image, что приводит к резкому эффекту.

Я не знаю, как устранить это, любые идеи? :)

Живой пример здесь: http://jsfiddle.net/timkl/fjupq/ - Задержка на сервере JSFiddle не так долго, но она все еще там.

Answer 1

Решение этого вопроса - использовать спрайты вместо отдельных изображений.

• http://css-tricks.com/css-sprites/

Вы можете использовать одно изображение, а вместо изменения источника фона на :hover, вы просто изменить положение фона. Таким образом, все изображение загружается заранее.

Например, проверить спрайтов лист переполнению стека в:

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

Вы не должны принимать его в этом крайнем случае, вы можете просто одно изображение, которое имеет как нормальный и :hover, и переместите его влево/вправо или вверх/вниз.

Answer 2

Простым решением является использование javascript для предварительной загрузки изображения. Включите это в ГОЛОВУ страницы:

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script>