Jak wstępnie załadować obrazy używane tylko po najechaniu kursorem?

Mam link, który zaczyna się od jednego obrazu tła, a następnie zmienia się po najechaniu kursorem na inny. Oba obrazy tła są ustawione w CSS. Moje przeglądarki (dowolna z nich) wydają się nie ładować obrazu aktywowanego, dopóki go nie najedziesz. Ale potem pojawia się pusty obraz przez kilka sekund (w moim bardzo wolnym połączeniu) potrzeba do załadowania nowego. Czy istnieje sposób, aby zachęcić przeglądarkę do wstępnego ładowania obrazu aktywowanego, aby opóźnienie nie występowało podczas aktywowania?

1) Użyj duszka CSS (jest to preferowana metoda).

2) Załaduj obrazy do ukrytego div. Umieść obrazy w div, a następnie ustaw CSS div, aby display: none;go ukryć.

3) Załaduj obrazy za pomocą CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Użyj tego JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

Naprawdę nie lubię rozwiązania javascript - jest niechlujne, trudne w utrzymaniu i oczywiście całkowicie zawiedzie, gdy JS jest wyłączone.

Nowoczesne rozwiązanie polega na użyciu duszków CSS - spróbuj, uwierz mi, będziesz się zastanawiać, dlaczego nigdy wcześniej tego nie robiłeś;)

Znalazłem ten link na temat wstępnego ładowania obrazów przy użyciu czystego CSS:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

I działało to dla mnie, gdy muszę zmienić różne obrazy tła po najechaniu myszą.

Dodaj to powyżej swojego CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Jeśli wybierzesz trasę duszka, jak sugeruje danp, nadal masz problem z ładowaniem duszka, zanim będzie on potrzebny. To powiedziawszy, że kocham duszki; aby je łatwo zrobić, używam narzędzia Spriteme od Steve'a Soudersa: