Rotator banerów - jak wymusić pobranie grafik na starcie

[siusiak1000]

Cześć,

mam oto taki rotator bannerów: 

<script>

baner = new Array(2);

baner[0] = '<a href="https://google.pl" target=_blank><img src="/obrazek/2.jpg" width="100%" HEIGHT="100%" BORDER="0" alt=" "></a>';

baner[1] = '<a href="https://google.pl/" target=_blank><img src="/obrazek/3.jpg" width="100%" HEIGHT="100%" BORDER="0" alt=" "></a>';

 

//losowe wyświetlenie

setTimeout(function() {

  index = Math.floor(Math.random() * baner.length);

  document.getElementById('banner').innerHTML = baner[index];

  setTimeout(arguments.callee, 1000);

}, 1);

</script>

<div id="banner"></div>

 

Umieściłem go sobie w górnej części strony i gdy pierwszy baner się wyświetli to wszystko jest okej ale gdy już przychodzi pora, żeby drugi się załadował to bannery jakby znikają na chwilę (na czas pobrania następnego) i jakby "szarpię" stroną. Więc moje pytanie jak wymusić, żeby wymusić pobieranie wszystkich grafik na starcie ładowania strony? Ewentualnie jak to zrobić, żeby nie było takiego "szarpania" czyli znikania banerów na czas ładowania nowego. 

 

Dziękuję z góry za odpowiedź i pozdrawiam

[n0timportant]

Dajesz na samym dole strony jakieś puste span'y (czy cokolwiek tam chcesz) i ładujesz im jako niewidoczne tło obrazki.

 

Dla przykładu chcemy wczytać trzy obrazki:

 

1. HTML:

<span id="preload-01"></span>
<span id="preload-02"></span>
<span id="preload-03"></span>

2. CSS:

#preload-01 { background: url(https://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(https://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(https://domain.tld/image-03.png) no-repeat -9999px -9999px; }