Preload images

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Formålet med at preloade images (at hente billeder inden de vises) er at man kan få en mere flydende visning ved at browseren har hentet billederne inden de vises.

Teknikken er specielt anvendelig til når man laver en hover-effekt med et billede, da det første gang vil give et lille blink, inden browseren har fået loadet billedet. Dette kan undgås hvis man preloader billederne.

Det er kun nødvendigt at preloade de billeder der ligger skjult, som man vil vise ved hjælp af javascript, CSS eller jQuery.

Filen med billed-angivelser

En simpel måde at gøre det på er ved at include en lille javascript-fil hvor man angiver hvilke billeder der skal preloades. Koden kan se ud som følger:

pictures = ["Billeder/Knap1h.png", "Billeder/Knap2h.png"];
img = [];
if (document.images) {
	for (n in pictures) {
		img[n] = new Image();
		img[n].src = pictures[n];
	}
}

I denne fil skal man angive de billeder man ønsker pre-loadet i den første linje.

Koden er udviklet ud fra inspiration fra denne side[1]

Filen med javascript-koden kan hentes i denne ZIP-fil.

I HTML-filen

Inde i HTML-filen angiver man at filen skal includes som javascript ved at tilføje følgende linje i HEAD-tagget:

<script type="text/javascript" src="preload.js"></script>

Referencer

  1. Mediacollege side om preload af billeder ved hjælp af javascript