Bar: /* Referencer */

2022-12-06T20:30:04Z

Referencer

← Ældre version		Versionen fra 6. dec. 2022, 22:30
Linje 32:		Linje 32:
	==Referencer==		==Referencer==
	<references />		<references />

			{{webcode}}

	[[Kategori:HTML]]		[[Kategori:HTML]]

Bar: 1 version importeret

2022-10-22T14:16:05Z

1 version importeret

← Ældre version	Versionen fra 22. okt. 2022, 16:16
(Ingen forskel)

htx_>Bar: /* Filen med billed-angivelser */

2015-05-11T21:10:48Z

Filen med billed-angivelser

Ny side

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:
<source lang="javascript">
pictures = ["Billeder/Knap1h.png", "Billeder/Knap2h.png"];
img = [];
if (document.images) {
for (n in pictures) {
img[n] = new Image();
img[n].src = pictures[n];
}
}
</source>

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<ref>[http://www.mediacollege.com/internet/javascript/image/preload.html Mediacollege] side om preload af billeder ved hjælp af javascript</ref>

Filen med javascript-koden kan [[media:preload_images.zip|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:
<source lang="html4strict">
<script type="text/javascript" src="preload.js"></script>
</source>

==Referencer==
<references />
[[Kategori:HTML]]

Preload images - Versionshistorie

Bar: /* Referencer */

Bar: 1 version importeret

htx_>Bar: /* Filen med billed-angivelser */