La precarica delle immagini è un ottimo modo per migliorare la user experience. Quando le immagini sono precaricate nel browser, il visitatore può navigare ovunque nel nostro sito e disporre di tempi di caricamento più veloci. Ciò è particolarmente utile per le gallerie di foto e altri siti con immagini pesanti in cui si desidera visualizzarle il più rapidamente e, s’è possibile, senza problemi.

Il precaricamento immagini aiuta sicuramente gli utenti senza banda larga ad avere una migliore esperienza quando visualizza il contenuto. In questo articolo, esploreremo quattro tecniche differenti di precarico per migliorare le prestazioni e l’usabilità del nostro sito.

Precarica con i CSS e JavaScript
⤽
Con questo metodo, le immagini possono essere facilmente ed efficacemente precaricate utilizzando il seguente codice:
#preload-01 { background: url(https://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(https://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(https://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Strategicamente, applicando degli ID per il precarico a elementi esistenti (X)HTML, si può utilizzare la proprietà di sfondo CSS per precaricare le immagini fuori dallo schermo in background. Quindi, fino a quando i percorsi a queste immagini non saranno menzionate in altre parti della pagina web, rimarrano fuori dallo schermo; solo quando saranno chiamate, il browser utilizzerà le immagini precaricate e memorizzate nella cache durante il rendering della pagina. Semplice, efficace, e non richiede JavaScript.
In questo metodo, tuttavia, c’è spazio per un miglioramento. Le immagini che sono state precaricate con questo metodo verranno caricate con altri contenuti della pagina , aumentando così il tempo complessivo di caricamento della pagina. Per risolvere questo problema, possiamo usare un po’ di JavaScript per ritardare la precarica fino a quando la pagina abbia terminato di caricare i suoi contenuti. Questo è possibile mediante l’applicazione della proprietà CSS background utilizzando addLoadEvent():
function preloader() {
	if (document.getElementById) {
		document.getElementById("preload-01").style.background = "url(https://domain.tld/image-01.png) no-repeat -9999px -9999px";
		document.getElementById("preload-02").style.background = "url(https://domain.tld/image-02.png) no-repeat -9999px -9999px";
		document.getElementById("preload-03").style.background = "url(https://domain.tld/image-03.png) no-repeat -9999px -9999px";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);
Nella prima parte di questo script, prepariamo le precariche reale puntando a specifici elementi di precarico con stili di sfondo che chiamano le varie immagini. Quindi, per utilizzare questo metodo, è necessario sostituire il preload-01, preload-02, preload-03, ecc, con gli ID che saranno destinati nel markup. Inoltre, per ciascuna delle proprietà dello sfondo, è necessario sostituire image-01.png, image-02.png, image-03.png, ecc, con il percorso e il nome del file dell’immagine. Nessun altra modifica è necessaria per questa tecnica.
Poi, nella seconda parte dello script, si usa la funzione addLoadEvent() per ritardare l’esecuzione della nostra funzione preloader() fino a quando la pagina sia completamente caricata.
Cosa succede quando JavaScript non è disponibile sul browser dell’utente? Molto semplicemente, le immagini non saranno precaricate e si caricheranno normalmente quando saranno chiamate nella pagina web.
Precarica solo con JavaScript
⤽
Per quanto sia efficace il metodo precedente, trovo in generale che sia troppo noioso e che richiede diverso tempo per applicarlo concretamente. Invece, in genere si preferisce precaricare le immagini tramite un piccolo codice in JavaScript. Qui ci sono un paio di funzioni, con metodi di precarica, che lavorano splendidamente in quasi tutti i browsers moderni.
JavaScript Metodo #1
⤽
Non intrusivo, con degrado e facile da implementare, è sufficiente editare/aggiungere i percorsi delle immagini in base alle esigenze — nessun altra modifica è richiesta.
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"http://domain.tld/gallery/image-001.jpg",
				"http://domain.tld/gallery/image-002.jpg",
				"http://domain.tld/gallery/image-003.jpg"
			)
		//--><!]]>
	</script>
Questo metodo è particolarmente utile per il precaricamento di un gran numero di immagini. Su uno dei miei siti tipo galleria, uso questa tecnica per precaricare circa 50 immagini. Con l’inclusione di questo script in una pagina di accesso ristretto o login, la maggior parte delle immagini della galleria saranno precaricate dal momento in cui l’utente inserisce le proprie credenziali di accesso.
JavaScript Metodo #2
⤽
Ecco un altro metodo simile che utilizza JavaScript non intrusivo per precaricare qualsiasi numero di immagini. È sufficiente includere il seguente script in una delle nostre pagine web e modificarla in base alle nostre esigenze.
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--

			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();

				img1.src = "http://domain.tld/path/to/image-001.gif";
				img2.src = "http://domain.tld/path/to/image-002.gif";
				img3.src = "http://domain.tld/path/to/image-003.gif";
			}

		//--><!]]>
	</script>
Come potete notare, ogni immagine precaricata richiede una definizione di variabile, img1 = new Image();, così come una dichiarazione del sorgente, img3.src = "../path/to/image-003.gif";. Replicando il modello, è possibile precaricare le immagini a nostro piacimento.
Possiamo, anche qui, migliorare questo metodo per ritardare la precarica fino a quando la pagina viene caricata. Per fare questo, dobbiamo semplicemente avvolgere lo script in una funzione e usare addLoadEvent() per farlo funzionare:
function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/image-003.gif";
	}
}

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);
Precarica con Ajax
⤽
Come se tutto questo non fosse abbastanza, ecco un modo per precaricare le immagini utilizzando Ajax. Ho scoperto questo metodo arrivando a Of Geeks and letters, che utilizza l’oggetto DOM per precaricare non solo le immagini, ma anche i files del tipo CSS, JavaScript , e qualsiasi altro tipo di file. Il vantaggio principale di utilizzare Ajax direttamente con JavaScript è che il file in JavaScript e quelli in CSS possono essere precaricati senza influenzare il contenuto della pagina corrente. Per le immagini questo non è davvero un problema, ma il metodo è pulito ed efficace comunque.
window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};
Così com’è, questo codice precaricherà tre files: preload.js, preload.css, e preload.png. È impostato un timeout di 1000ms per evitare che lo script da appendere causi problemi con la normale funzionalità della pagina.
Per non lasciarci sfuggire niente, diamo un’occhiata a come questa sessione di precarica sarebbe sata scritta in JavaScript:

window.onload = function() {

	setTimeout(function() {

		// reference to <head>
		var head = document.getElementsByTagName('head')[0];

		// a new CSS
		var css = document.createElement('link');
		css.type = "text/css";
		css.rel  = "stylesheet";
		css.href = "http://domain.tld/preload.css";

		// a new JS
		var js  = document.createElement("script");
		js.type = "text/javascript";
		js.src  = "http://domain.tld/preload.js";

		// preload JS and CSS
		head.appendChild(css);
		head.appendChild(js);

		// preload image
		new Image().src = "http://domain.tld/preload.png";

	}, 1000);
};
Qui ci sono i nostri tre file da precaricare quando la pagina è pronta con la creazione di tre elementi tramite l’oggetto DOM. Questo metodo è inferiore al metodo Ajax nel caso in cui il contenuto del file precaricato non dovrebbe essere applicato alla pagina.
Precarica con jQuery
⤽
La libreria jQuery fornisce un metodo, each(), che esegue un ciclo attraverso ogni elemento dell’oggetto jQuery. La bellezza del metodo each() è che si crea un ambito separato per ogni iterazione del ciclo, che ci permette di lavorarci dentro senza interferenze.
Questo piccolo codice precarica tutte le immagini passate come argomento alla funzione in notazione Json: in pratica un array di elementi separate dalla visgola e racchiuse tra parentesi quadre.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img />')[0].src = this;
        // Alternativamente si può usare:
        // (new Image()).src = this;
    });
}

// Uso:

preload([
    'img/imgPippo.jpg',
    'img/imgPluto.jpg',
    'img/imgPlato.jpg'
]);
Se vogliano possiamo creare un piccolo plugin in jQuery, da includere dove ci serve:
$.fn.preload = function() {
    this.each(function(){
        $('<img />')[0].src = this;
    });
}

// Uso:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Sapete di qualche altro trick?
⤽
Mi piaciono questi tricks per la precarica: uso sempre un differente come soluzione alle stesse richieste. Se siete a conoscenza di qualche altro buon script per la precarica, compresi eventuali miglioramenti alle tecniche che ho condiviso qui, fatelo sapere qui nei commenti.
Similari
⋮ Fondamentali di jQuery ⋮
190% JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
⋮ Python per tutti ⋮
92% Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
⋮ Guida allo Zend Framework ⋮
69% Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …
⋮ Estendere Google Analytics con jQuery ⋮
41% Plugins ⊚
Da un bel po’ di tempo Google Analytics ha aperto la strada per la raccolta gratuita di statistiche del traffico del proprio sito web. Sono sicuro che molti di voi abbiano installato il codice di Google sui vostri siti e a…
⋮ Nuovi metodi in jQuery 1.6 ⋮
33% JQuery ⊚
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…