La vecchia tecnica del preload delle immagini tramite JavaScript sta vivendo un periodo di rinnovato interesse grazie a jQuery. Possiamo infatti utilizzare le stesse tecniche di prima ma in un modo più conciso ed elegante. Vediamo come.
Creiamo una funzione globale jQuery che fa uso di un array in cui conservare le copie cache delle immagini create in memoria passando alla funzione i vari percorsi delle immagini (relativi o assoluti):
(function($) {
var cache = [];
$.preLoadImages = function() {
var argsLen = arguments.length,
i;
for (i = 0; i < argsLen; i += 1) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery);
Esempio pratico:
$.preLoadImages('pic1.jpg', 'http://sito.it/img/pic2.png');
La tecnica funziona perchè quando creiamo un elemento nel DOM ed impostiamo un suo attributo, il browser viene di fatto costretto a risolvere l'attributo dell'elemento (in questo caso l'attributo src dell'elemento img) prima ancora del rendering finale. Questo ci permette di risparmiare un passo intermedio tra il parsing ed il rendering.