JS: Images pre-loaden

Beste,

Voor mijn nieuwe website ben ik bezig met de codering van de website. Nu heb ik een afbeelding in de header die een :hover meekrijgt van een andere afbeelding waardoor de kleur veranderd als je eroverheen gaat.

Nu heb ik deze 2de afbeelding met javascript een pre-load meegegeven zodat deze afbeelding bij langzame internetconnecties niet opnieuw hoeft te laden.

Dit heb ik met het volgende script gedaan:

<SCRIPT language="JavaScript"> <!-- if (document.images) { preload_image = new Image(998,175); preload_image.src="images/headeroverlay.png"; } //--> </SCRIPT>

Nu is mijn vraag, is dit wel slim om te doen, of is er misschien een betere manier? En wat zien mensen zonder javascript in hun browser?

Bedankt!

betere manier is om het te doen met css sprites

Dit heb ik inderdaad nog niet op gezocht. Ik zal dit onderdeel eens onderzoeken.

edit
Ik heb de volgende instellingen, ik ben verder gegaan op het gebruik van sprites.

#headerimage { background-image: url('images/headersprite.png'); width: 988px; height: 175px; border-style: solid; border-width: 1px; border-color: #999; margin-top: 10px; display: block; background-position: 0px 0px; } #headerimage:hover { width: 988px; height: 175px; border-style: solid; border-width: 1px; border-color: #999; margin-top: 10px; display: block; background-position: 0px 175px; }

Kan ik dit nog optimaliseren? Waardoor de code kleiner word?

je kan in ieder geval border: 1px solid #999; doen als ik het niet verkeerd heb.

Op de hover hoef je alleen de properties mee te geven die veranderen. In dit geval dus alleen de background-position

In een :hover worden alle waardes overgenomen uit de parent, dus zou je alleen de position van de background maar hoeven in te geven.

edit: Wat Rajiv zegt dus

Is dit dan de volledig geoptimaliseerde versie?

#headerimage { background-image: url('images/headersprite.png'); width: 988px; height: 175px; border: solid 1px #999; margin-top: 10px; display: block; background-position: 0px 0px; } #headerimage:hover { background-position: 0px 175px; }

Is er ook een optie dat je een kleurfoto in css black&white kan weergeven? Zodat ik het op één afbeelding kan houden zodat hij nog sneller laad?

background-position: 0px 0px;

Lijkt me ook onnodig, dat is standaard. Mocht je het nog korter willen:

background: url('images/headersprite.png') 0px 0px;

en dan

background: url('images/headersprite.png') 0px 175px;

En 0px maar ook als 0 geschreven worden.