Precarga de imágenes en JavaScript

En este artículo describiremos como realizar una precarga de imágenes mediante JavaScript.

Crearemos una función llamada precargaImg y la mandaremos llamar en el evento onload de nuestra pagina HTML, esta función debe de ir entre las etiquetas <HEAD> y </HEAD>, el código completo nos quedaría de la siguiente forma:

<HTLM>

<TITLE>Precarga de imágenes en JavaScript</TITLE>

<HEAD>

<SCRIPT TYPE=”text/javascript”>

function precargaImg() {
if (!document.images) return;
var ar = new Array();
var arguments = precargaImg.arguments;

for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
}
</SCRIPT>

</HEAD>

<BODY onload=”precargaImg(‘images/i1.gif’,’images/i2.gif’,’images/i3.gif’)”>

<!–  Contenido de la pagina  –>

</BODY>

</HTML>

En la etiqueta <BODY> debemos de colocar la instrucción para mandar llamar la función de precarga pasándole como parámetros la ruta y nombre de las imágenes que deseamos sean precargadas.

<BODY onload=”precargaImg(‘images/i1.gif’,’images/i2.gif’,’images/i3.gif’)”>.

Para este ejemplo solo se precargaron tres imágenes (i1.gif, i2.gif, i3.gif) que se encuentran en la carpeta “images”, sin embargo se pueden precargar el numero de imágenes que queramos.

Otra forma de colocar la función precargaImg en el evento onload de la página pudiera ser:

onload = function(){
precargaImg(‘images/i1.gif’,’images/i2.gif’,’images/i3.gif’);

//Otras funciones
}

Esta función también la colocamos dentro de la etiqueta <HEAD> y </HEAD>.

Suele ser útil este modo de mandar llamar a la función cuando tenemos otros procesos que deseamos ejecutar en el evento onload.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: