Casi todo sitio web tiene efectos hover con dos imágenes (estado inactivo y activo o rollover) y, en caso que las imágenes del estado activo o rollover (hover en CSS) sean pesadas, transcurre un espacio muerto donde no se muestra ninguna imágen hasta que el navegador del cliente la descarga.

Para solucionar este problema existen varias vías, aunque las más utilizadas son con Javascript también es posible hacerlo con AJAX, php y demás tecnologías.

En este tutorial utilizaremos una función simple en javascript, de manera explicativa para que puedas entenderla de forma sencilla y aplicarla a tu sitio web sin mayor problema.

El script explicado

El script en cuestión es el siguiente:

<!-- PRELOAD DE LAS IMAGENES -->
<div class="hidden"><script type="text/javascript">// < ![CDATA[
//[CDATA[//
				var images = new Array()
				function preload() {
					for (i = 0; i < preload.arguments.length; i++) { 						images[i] = new Image() 						images[i].src = preload.arguments[i] 					} 				} 				preload( 					"http://www.url_de_tu_imagen.extension", 					"http://www.url_de_imagen.extension" 				) 				//
// --
// ]]></script></div>

Como veis, creamos una capa oculta (div class="oculta") donde insertamos el script javascript para la precarga de imágenes.

Dentro del script definimos la función sin argumentos aunque después la llamaremos con las urls de las imágenes a precargar.

Esta función se encarga de recorrer los argumentos uno a uno y añadirlas a un array images que, al terminar la ejecución de la función, quedará cargado con todas las imágenes dentro.

Digamos que con esta función obligamos al cliente a descargar las imágenes aunque no las vaya a utilizar.

Configurar e instalar el script

Para instalar el script anterior basta con copiar ese código justo antes de la etiqueta de cierre del body (</body>)

Para configurarlo añadimos tantas imágenes como queramos en la llamada de la funcion. Deberemos separar las URL a las imágenes por comas (,), dejando la última sin coma final (dará error el javascript).

Funcionamiento (algunos consejos)

Aunque ya he explicado arriba cómo funciona, me gustaría dejar claro que esta función obliga al visitante a descargar las imágenes, cosa poco aconsejable si visitamos el sitio desde un dispositivo móvil dado que estaremos consumiendo más datos de los realmente necesarios.

Por otro lado, lo bueno es que, al tratarse de javascript, la mayoría de dispositivos móviles no lo interpretarán adecuadamente o simplemente lo ignorarán (traen por defecto javascript desactivado).