Precarga de imágenes en Javascipt

Aquí os dejamos un sencillo tutorial para realizar la precargar de imagenes con javascript.

Utilizaremos una función en javascript y la llamaremos dentro de nuestro BODY.

Este es el código javascript necesario (incluirlo dentro del HEAD):

<script language="javascript 1.2">
<!--

var i;
var imagenes = new Array("imagen1.gif","imagen2.gif","imagen3.gif");
var lista_imagenes = new Array();

function cargarimagenes(){

for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];

}

}

//-->
</script>

La variable imagenes incluye todas las imagenes que queremos precargar.

Ahora solo necesitamos llamar a esta función.

<BODY>
<script>
cargarimagenes();
</script>
</BODY>

Visto en el Guru del Programador

You may also like...

3 Responses

  1. Si estas usando jQuery puedes usar algo asi:

    $(”).attr(‘src’, ‘imagen.jpg’);

    Y si quieres cargar varias imagenes, puede poner eso dentro de un “loop” con un “array”.

  2. $(“”).attr(“src”, “imagen.jpg”);

    Arreglado, por que en el comentario anterior me quito el tag

  1. 22 julio 2009

    […] ejemplo muy sencillo para precargar imágenes, muy útil cuando usemos el efecto roll over utilizando CSS, es creando una capa en el que […]

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>