Precargar imágenes CSS con Javascript

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).

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información