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

Escrito por Niko | 22 de Julio de 2009 con 3 comentarios.
Etiquetas:
Lee más artículos sobre General

Artículos relacionados

Comentarios

  1. Precarga de imágenes mediante CSS - ZonaMasters - Recursos para webmasters - 22 de Julio de 2009 | 13:41

    [...] ejemplo muy sencillo para precargar imágenes, muy útil cuando usemos el efecto roll over utilizando CSS, es creando una capa en el que [...]
  2. Abraham Estrada - 22 de Julio de 2009 | 17:25

    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”.
  3. Abraham Estrada - 22 de Julio de 2009 | 17:26

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

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

Deja una respuesta