Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 36
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Förladda bilder (preload)

Kod


<script type="text/javascript">
var imagesSrc=["bild1.gif","flerBilder/bild2.gif"];

var imagesOnLoad="window.status='Laddar bilder, '+parseInt(images.loaded/images.toload*100)+'% klar.'";
var imagesOnAllLoaded="window.status='Alla bilder laddade på '+images.loadtime+'ms.'";

var images=new Object();
images.loaded=0;
images.starttime=new Date();
images.toload=imagesSrc.length;
for(i in imagesSrc){
	images[i]=new Image();
	images[i].onload=function(){
		images.loaded++;
		if(imagesOnLoad.length>0){ eval(imagesOnLoad); }
		if(images.loaded==images.toload&&imagesOnAllLoaded.length>0){
			images.stoptime=new Date();
			images.loadtime=images.stoptime.getTime()-images.starttime.getTime();
			eval(imagesOnAllLoaded);
		}
	}
	images[i].src=imagesSrc[i];
}
</script>

Kommentar

Scriptet används för att förladda bilder till webbläsaren så att de snabbt kan visas vid exempelvis bildväxlingar eller sidbyten. Lägg adressen till bilderna i arrayen imagesSrc längst upp i scriptet. Variablerna imagesOnLoad och imagesOnAllLoaded kan du använda för att ange scriptkod som skall exekveras när varje bild laddats och när alla bilder laddats. Vill du kan du lämna dessa 2 variabler tomma (var imagesOnLoad="" och var imagesOnAllLoaded="").

Avancerat
Scriptet använder objektet images vilket ges följande egenskaper.

  • images.loaded = Antal bilder som laddats hittills.
  • images.toload = Totalt antal bilder att ladda.
  • images.starttime = date-objekt som sätts när scriptet startas.
  • images.stoptime = date-objekt som sätts när alla bilder laddats.
  • images.loadtime = Antalet millisekunder det tog att ladda alla bilder.

Se även ett annat exempel här.

,