Cargar imagen paralelamente

[Naahuel]

Entiendo que este es un tema que se discute mucho y hay varias aproximaciones. Todas las que conozco (que no sea usar un sprite) son con JavaScript. La única que conozco que no utiliza javascipt me parece muy mala práctica. Esta última consiste en agregar esto en nuestro HTML:

Código HTML:

<img class="cargame" src="images/imagen_que_quiero_cargar1.jpg" />
<img class="cargame" src="images/imagen_que_quiero_cargar2.jpg" />
...
 

Y luego con CSS:

Código CSS:

.cargame{display:none;}
 

Es decir, ponemos imágenes explícitas en el HTML pero con CSS las ocultamos. Éste método es muy poco recomendable por una razón conceptual y porque no funciona en todos los navegadores (Opera y Chrome, por ejemplo, no cargarán la imagen si está oculta).

Las opciones con JavaScipt que conozco y que alguna vez he usado:

1.- Usar un script para jQuery llamado preloadCssImages.jQuery_v5.js. Tienes sus ventajas, pero tampoco lo recomendaría... me parece demasiado.

2.- El método más sencillo y compatible:

Código Javascript:

imagenPreCargada = new Image(); 
imagenPreCargada.src = 'images/imagen_que_quiero_cargar1.jpg';
 

Si querés usar más de una imagen, podés hacer un array y luego recorrerlo:

Código Javascript:

$arr_imagenes = ['images/imagen_1.jpg', 'images/imagen_2.jpg', 'images/imagen_2.jpg', 'images/imagen_3.jpg', ];
for (i=0;i<$arr_imagenes.length;i++){
    tempImg = new Image();
    tempImg.src = $arr_imagenes[i];
}
 

Y la mejor forma, usar sprites de imágenes :P