Cargar imagen paralelamente

[titocba]

Estimados, buenas noches.
Necesito la opinion de algun experto en la materia, para emplear l mejor practica para el siguiente caso.

Necesito que unas determinadas imagenes que tengo en el servidor de mi web se ya esten cargadas cuando yo las demande. Osea cuando las solicite desde un estilo css estas ya esten disponibles y no perder el tiempo de las descargas de la misma.
Aclaro, no es viable usar sprite de imagenes.


Saludos y muchas gracias desde ya

[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

[angel1993]

tambien puedes meter las imagenes en un Div con overflow hidde logicamente y le pones de tamaño 1x1 de este modo toricamente las imagenes estan visibles solo que se cortan, nunca lo he probado, pero creo que no tendras problemas.

[Tedel]

En tres pasos:

1. Crea un subdominio
2. Pon tus imágenes allí
3. Modifica tus códigos para que tomen las imágenes del subdominio.

Explicación:

Cuando pones las imágenes en un folder dentro de tu dominio, lo que hace el navegador es descargar según su límite, por lo general 8.

Cuando pones las imágenes en un subdominio, lo que hace el navegador es descargar según su límite, por lo general 8, de cada subdominio porque lo asume como si fuere desde otra web. Lo que puede traducirse en hasta 24 descargas simultáneas (asumiendo dos subdominios).

Recomendación: Usa máximo dos subdominios.
Recomendación dos: Optimiza tus imágenes al máximo.