Preload images

Fra HTX Arduino
Spring til navigation Spring til 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
Webcode
JavaScript for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript Date objektet - setTimeout - setInterval
PHP Header - Include