Preload di immagini in JavaScript

Quando si fa un effetto in JavaScript o in CSS che prevede un cambio di immagine, potrebbe esserci un fastidioso tempo vuoti in cui bisogna aspettare che il browser scarichi l'immagine prima di visualizzarla.
Per risolvere questo problema, è possibile pre-caricare le immagini in JavaScript appena viene caricata la pagina in questione.
Per prima cosa bisogna creare la funzione in JavaScript che si occuperà del preload vero e proprio:

function preloadImages(){
	var images = ['/images/image1.jpg','/images/image2.jpg','/images/image3.jpg']; //Array contentente il percorso di tutte le immagini da pre-caricare
	var img_l = images.length;
	if(img_l>0){
		var img = new Image();
		for(var i=0;i<img_l;i++){
			img.src = images[i];
		}
	}
}

Questa funzione dovrà essere eseguita appena viene caricata la pagina, quindi bisogna modificare il tag body aggiungendo il parametro "onload" con il richiamo alla funzione:

<body onload="preloadImages();">

Se si vuole fare in modo che in ogni pagina si possano pre-caricare delle immagini diverse, è possibile modificare la funzione in questo modo:

function preloadImages(images){
	var img_l = images.length;
	if(img_l>0){
		var img = new Image();
		for(var i=0;i<img_l;i++){
			img.src = images[i];
		}
	}
}

Si dovrà poi passare l'array delle immagini quando si richiama la funzione:

<body onload="preloadImages(['/images/image1.jpg','/images/image2.jpg','/images/image3.jpg']);">

Guida scritta da Mattia il 26/07/2011.

Preload di immagini in JavaScript

Le ultime guide della categoria JavaScript: