Preload af billeder med html

Af Allan Vebel

Opdateret: 20-10-2011

Billeder tager tid

Preload af billeder bliver normalt lavet med JavaScript i forbindelse med onmouseover, således at billedet ikke først skal hentes fra serveren når musen kommer over billedet.

Jeg ser imidlertid ofte ret store billedsider - sådan nogle hvor man får en masse mindre billeder man kan klikke på for at få et større. Når man klikker på denne "thumbnail" går der 7 lange og 7 brede før billedet kommer, og er der mange af dem er ventetiden mange gange ulidelig, før man har set alle billederne igennem.

Klar på brugerens maskine

Det kan du gøre noget ved på din egen billedside. Du kan hente alle billederne ind på brugerens maskine, så de ligger klar i cache inden brugeren klikker på dem. Det er ret simpelt - du lægger billederne i en <div> i starten af din thumbnailside eller indgangsside - og så skjuler du den med display:none;. Billederne bliver ikke vist på siden, men hentes alligevel hjem på brugerens maskine:

<div id="preload">
<img src="b1.jpg" alt="b1">
<img src="b2.jpg" alt="b2">
... og så videre
</div>

I css-filen skriver du:

#preload{
display:none;
}

Billeder i lille størrelse

En anden version er den hvor du i virkeligheden viser billederne, eller i hvert fald tydeligt viser brugerne at billederne ligger klar. Det kan du gøre ved at vise de preloadede billeder i en meget lille størrelse, for eksempel:

#preload img{
width:15px;
height:15px;
margin:3px;
padding:3px;
border:1px solid gray;
}

Klikbare billeder

En tredje version kan være at gøre de små billeder klikbare ved at gøre billedet til et link. Her har jeg valgt en størrelse på 27 x 20. Eksperimenter selv med en størrelse der passer bedst.

<div id="preload">
<a href="#"><img src="b1.jpg" alt="b1"></a>
<a href="#"><img src="b2.jpg" alt="b2"></a>
... og så videre
</div>

Din css-kode kan se sådan ud:

#preload a img{
width:27px;
height:20px;
margin:1px;
padding:1px;
border:1px solid navy;
}

#preload a:hover img{
border:1px solid red;
}

Nederst i koden

Du kan lægge <div id="preload"> allernederst i din kode, så den ikke griber forstyrrende ind i selve billedvisningen. Allervigtigst er at gøre brugeren tydeligt opmærksom på at her kommer en side der tager lang til at hente hjem.

[Test af preload] - OBS! Tager lang tid at hente hjem på grund af store billeder.

Se også Brug attributter på dine billeder for nærmere detaljer om hvordan du bør behandle dine billeder!