Zanim o problemie to szybkie wprowadzenie. Na stronie mam menu zrobione jak poniżej:

[HTML] pobierz, plaintext 
<li><a href="index.php?id=st"> <img src="style/img/tek.gif" border="0" alt="Strona główna" class="st"></a></li>
[HTML] pobierz, plaintext 

Klasa w css wygląda następująco:

[HTML] pobierz, plaintext 
a .st {
background:url(img/st.gif);
}
a:hover .st{background:url(img/st_h.gif);}
a:active .st{background:url(img/st_h.gif);}
[HTML] pobierz, plaintext 

Najechanie kursorem na link powoduje zmianę obrazka. I teraz problem.
Przy najechaniu kursorem chwilę trwa zanim dogra się drugi obrazek. Czy jest jakaś metoda by wgrać obrazki przed pokazaniem strony tak by nie było widoczna ich podmiana ?
Zaznaczam, że to nie wina rozmiaru obrazka (2KB)


Zapomniałem dodać, że po dograniu drugiego obrazka problem już nie występuje.

Polecam zapoznać się z tzw. CSS Sprites. Ogólnie idea jest taka, że obydwa tła umieszczasz w jednym pliku, jeden pod drugim albo obok, jak wolisz i potem ustawiasz sobie background-position

Dwie metody - albo doczytać je Javascriptem, albo umieścić w kodzie strony <img> z hoverami i nadać im display:none (ew. atrybuty width i height ustawić na 0)

@UP
Sprajty - też dobry sposób

Na śmierć zapomniałem o CSS Sprite ! Aż wstyd się przyznać. Dzięki serdeczne dla Blame i Everth.

Temat można zamknąć. A dla potomnych rozwiązanie:

Plik css:

[HTML] pobierz, plaintext 
a .link{
background:url(img/obrazek.gif) 0px 0px no-repeat;
width:163px;
height:30px;
margin: 0px 0px 0px 0px;
}
a:hover .link{background:url(img/obrazek.gif) 0px -30px no-repeat;}
a:active .link{background:url(img/obrazek.gif) 0px -30px no-repeat;}
[HTML] pobierz, plaintext 

Obrazek to dwa połączone obrazki o rozmiarach 163 x 30 każdy.

Plik html:

[HTML] pobierz, plaintext 
<ul>
<li><a href="index.php" title="Strona główna"><img src="style/img/tek.gif" border="0" alt="Strona główna" class="link"></a></li>
</ul>
[HTML] pobierz, plaintext 

Plik tek jest to przezroczysty plik o wymiarach 163x30.

Pozdrawiam.