Загрузить изображения при загрузке страницы, CSS

Question

Недавно я задал вопрос об использовании изображений в качестве кнопок с помощью Java Script. ответ я получил реферировал меня к использованию CSS вместо этого и отлично работает. Однако изображения, которые я использую, занимают около 0,2 секунды для загрузки.

Прежде чем я использовал этот код, у меня была страница загрузки всех изображений в начале, а затем скрипт JS для изменения zIndex изображений под определенными событиями мыши, однако это переопределяет ссылки href и не работает.

С новым кодом все функции работают и поэтому дозу href, но каждый раз, когда страница загружает только первые загрузки изображений, другие 2, которые я использую под этим изображением при загрузке при запуске событий мыши. Это означает, что кнопки мигают, когда действие выполнено. Как я могу изменить этот код для загрузки изображений одновременно с загрузкой страницы?

код здесь: http://jsbin.com/casoy/12/edit?html,css,output

Я думал, что я должен показать старый код, как мы ..: http://jsbin.com/casoy/13/edit?html,css,js,output

Answer 1

вызов, чтобы загрузить изображение не будет происходить до тех пор стиль CSS не срабатывает.

Есть несколько способов сделать это и организующие HTML, что вы предпочитаете,

- here is a crude example using your code показать принцип.

MARKUP

<div class="preload1"></div> 
<div class="preload2"></div> 

<a href="http://officialacescottie.co.uk/Home/Home.html">click me</a> 

* CSS *

a { 
    display: block; 
    width: 600px; 
    height: 114px; 
    background-image:url("/Buttons/Home.gif"); 
    text-indent: -9999px; 
    outline: 0; 
} 
a:hover, .preload1 { 
    background-image:url("/Buttons/HomeP.gif"); 
} 
a:active, .preload2 { 
    background-image:url("/Buttons/HomeC.gif"); 
} 
/* hide these off page in a way that 
    the browser will still call the background-image */ 
.preload2, .preload1 { 
    position:absolute; left:-9999px; top:-9999px; 
} 

/* image urls are shortened here only so it presents better on SO */ 

Это показывает основной принцип, согласно которому, когда a:hover срабатывает, фоновое изображение ссылка уже была возможность «предварительно загружать» кеш браузеров.