Un ejemplo muy sencillo para precargar imágenes, muy útil cuando usemos el efecto roll over utilizando CSS, es creando una capa en el que cargaremos imagenes de background que no se llegan a mostrar.
Ejemplo del CSS:
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
Ejemplo del HTML:
<div id="preloadedImages"></div>
Visto en SentidoWeb
Escrito por Niko | 
22 de Julio de 2009 | 
1 comentario
CSS.
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 | 3 comentarios
General.
