Il precaricamento di immagini é una pratica usata spesso in JavaScript.
Il concetto é molto semplice: una volta che il resto della pagina é stato caricato, si carica nella cache del browser l’immagine all’insaputa dell’utente.
In questo modo, quando serve, l’immagine puó essere visualizzata più velocemente, senza più dover attendere che sia caricata.
In molte applicazioni, questa tecnica ha effetto su solo una parte delle visite, poiché una volta che un’immagine é nella cache vi rimarrà almeno un po’ (a dipendenza delle impostazioni dell’utente),
ma a mio avviso rimane comunque importante, dato che la prima visita di un utente è spesso la più importante (ma come web developer dovrebbe comunque essere la nostra priorità di dare la miglior esperienza possibile agli utenti). In altre applicazioni precaricare le immagini è invece fondamentale al funzionamento della pagina, come vedremo fra un attimo.

Applicazione di base

// URL dell'immagine da caricare
var src = 'http://www.example.com/immagine.jpg';

// nuovo oggetto immagine
var img = new Image();

//il metodo onLoad verrà eseguito quando l'immagine è caricata completamente
img.onload = function () { alert("Immagine caricata!"); };
//il metodo onError verrà eseguito se si verifica un errore con il caricamento dell'immagine
img.onerror = function () { alert("Errore!"); };

// assegnamogli l'url già specificato. Da ora l'immagine viene caricata
img.src = src;

Questa è la forma più terre-à-terre del precaricamento delle immagini in JavaScript. Per cominciare, creiamo un nuovo oggetto immagine con new Image(). Volendo, possiamo poi assegnare al metodo onLoad una funzione che verrà eseguita quando l’immagine è completamente caricata e un metodo onError che viene eseguito se si verifica un errore con il caricamento dell’immagine. Infine, assegnamo alla nostra immagine l’URL desiderato – il browser comincierà immediatamnte a caricarla. In questo modo abbiamo aggiunto quest’immagine alla cache del browser, rimuovendo così un eventuale ritardo quando l’immagine viene visualizzata.

Esempio: caricare una lista di immagini

Di solito, però, non vorrai caricare una sola immagine, bensì una lista di immagini.

function precarica (src) { // src e' l'URL dell'immagine da caricare
    var img = new Image();

    img.onload = function () { alert("Immagine caricata!"); };
    img.onerror = function () { alert("Errore!"); };

    img.src = src;
}

// lista di immagini da caricare
var urls = ['http://www.example.com/immagine1.jpg',
            'http://www.example.com/immagine2.jpg',
            'http://www.example.com/immagine3.jpg',
            'http://www.example.com/immagine4.jpg'];

// carica ciascuna immagine nella lista
var L = urls.length;
for (var i = 0; i < L; i++) {
    precarica(urls[i]);
}

Qui abbiamo messo il codice per precaricare l’immagine in una funzione chiamata precarica. Poi usiamo un loop per chiamare quella funzione per ciascun elemento nella lista di immagini.
Ho usato questa tecnica per ottenere, ad esempio, degli effetti di rotazioni 3D come sul forum Momo40k. Per queste applicazioni era necessario avere tutte le immagini caricate prima che cominciasse la rotazione, in modo da evitare rallentamenti.