Automatizar la precarga de las imagenes

Filament Group presentó un código muy cómodo a la hora de cargar todas las imágenes de nuestras CSS. 

¿Que hace el código?

Se recorre todas las hojas CSS que esten vinculadas e importadas y crea una matriz con todas las URLs de imágenes. Posteriormente se recorre todo ese conjunto de direcciones y crea un objeto imagen para cada uno de ellos. De tal forma, que quedaran almacenados en la caché y preparados para su uso posterior.

¿Cómo se utiliza?

Simplemente tienes que tener la famosa librería de jQuery y preloadCssImages.jQuery_v5.js este último es el código creado por dicho grupo.

Teniendo eso solo tienes que llamar a $.preloadCssImages(); cuando el DOM este listo. De la siguiente manera:

$(document).ready(function(){
     $.preloadCssImages();
});

Esto comenzará a analizar todos los archivos CSS y comenzará la precarga de las imágenes.

Otra pequeña idea es poder conocer el estado de la precarga, así podríamos incluir una barra o algo parecido que indique al usuario el tiempo de carga de la página. Para ello podemos pasar una extensión que reciba el estado de está con tatusTextEl y statusBarEl. Un ejemplo:

$.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});

Un detalle a tener en cuenta sería que en las imágenes de fondo, aseguraos en colocar el atributo 'no-repeat'.

Por ultimo si queremos ejecutar este código mientras otros elementos se están ejecutando, modificar el valor simultaneousCacheLoading a 1 ya que por defecto está a 2. Esto te permite especificar el numero de imágenes simultaneas a descargar. Recordar que los navegadores tienen limite para ejecutar peticiones HTTP.